0

Есть контейнер в котором 9 элементов. Мне нужно расположить их:

  1. По 4 в каждой строке
  2. Элементы во всю ширину колонки
  3. Строка с нечетным количеством имеет 3 элемента равной ширины

    ul {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    }
    li {
    margin-bottom: 1.5%;
    margin-right: 1.5%;
    height: 100%;
    flex: 1 0 23%;
    border: 1px solid;
    list-style: none;
    text-align: center;
    }
    ul li:nth-child(4n) {
      margin-right: 0;
    }
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
</ul>

Делал таким образом, но столкнулся с тем, что в крайней строке элементы тоже растягиваются. https://disk.yandex.ru/d/JIvFKgSAgNxYJw

Каким образом мне сделать, чтобы все дочерние были единой ширины? Например 9 (10,11) такого же размера как и остальные, но при этом заполняли 100% пространства. Голову уже сломал. Пробовал фикс ширину задавать, но у каждой колонки с правой стороны оставался зазор, а width: 23.9999% не очень красиво будет.

UPD: Ответ нашел в width:calc( 100% / 4 );

3 ответа 3

0

Строка с нечетным количеством имеет 3 элемента равной ширины,

думаю нужно добавить flex-grow: 1; и изменить на flex: 0 0 23%; для li. И box-sizing: border-box; желательно добавить для ul

Будет так

ul {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  box-sizing: border-box;
}

li {
  margin-bottom: 1.5%;
  margin-right: 1.5%;
  height: 100%;
  flex: 0 0 23%;
  flex-grow: 1;
  border: 1px solid;
  list-style: none;
  text-align: center;
}
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
</ul>

3
  • Согласен. Суть вопроса в том, чтобы 9,10,11 были такого же размера как будто их 4 в строке (width как у 1-8 элементов) 5 июн 2022 в 13:35
  • Так так и есть сейчас, последний ряд 3 блока равной ширины, или должно быть по другому? 5 июн 2022 в 14:28
  • Вопрос решился с помощью width:calc( 100% / 3 ); 10 июн 2022 в 22:57
0

Так имеете ввиду?

ul {
  display: flex;
  flex-wrap: wrap;
}

li {
  margin-bottom: 1.5%;
  margin-right: 1.5%;
  height: 100%;
  flex: 0 0 23%;
  border: 1px solid;
  list-style: none;
  text-align: center;
}

ul li:nth-child(4n) {
  margin-right: 0;
}
ul li:last-child {
    flex-grow: 1;
}
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
</ul>

4
  • Даа. А вот теперь как бы совместить это с flex-grow: 1; Чтобы 9-й элемент не растягивался на 100%. Например в случае если у меня 6,7,8 элементов в строке будет. 5 июн 2022 в 13:33
  • не понятно, можете показать рисунок как нужно
    – Andrew
    5 июн 2022 в 14:10
  • disk.yandex.ru/d/ieUJGT-dINEBnA Я сталкиваюсь с проблемой, что крайний элемент не идет в 100%, решал это с помощью flex-grow: 1;, но крайняя строка выглядит так disk.yandex.ru/d/R6IDvZNyUAosXQ 5 июн 2022 в 14:15
  • изменил ответ свой в css. К последнему элементу добавляйте flex-grow: 1;
    – Andrew
    5 июн 2022 в 14:37
0

Ответ нашел в width:calc( 100% / 4 );

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.