@eugenedrvnk

Как выстроить n элементов в ряд с помощью flex?

В примере ниже ширина контейнера - 500, ширина внутренних блоков - 100.
Допустим, мне нужно выстроить такую структуру, что бы в ряду было по 4 блока и потом перекидывалось на следующую строку. При этом нужно что бы эти 4 блока выравнивались по принципу space-between.
Пытался делать через обёртки, создавать их по 25% и уже в каждой из обёрток позиционировать элемент, но там возникает проблема с необходимостью выстраивания через space-between.

Какие могут быть ещё варианты?



Нужно что бы выходило что-то в таком духе :
GnuiGn8.png

Сейчас пришла идея, учитывая что я на vue это делаю, что можно просто делать без flex-wrap, а делить поступающий массив на нужное кол-во блоков и выводить их просто как отдельные, независимые блоки в которых идёт space-between. Но всё же, есть какой-то вариант css решения?
  • Вопрос задан
  • 100 просмотров
Пригласить эксперта
Ответы на вопрос 4
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
1. Вам не нужен space-between.
Потому что следующим ходом выяснится, что если число дочерних блоков не кратно 4, то выглядит плохо.
2. Если ширина обертки и дочерних блоков фиксирована, то просто используйте
.item:not(:nth-child(4n)) {
  margin-right: calc(100px / 3);
}

Альтернатива еще одна обертка с отрицательными margin и margin с двух сторон для дочерних.
3. Вообще достаточно уменьшить ширину контейнера на 1px (как угодно, шириной, отступом), чтобы пятый элемент не смог влезть и компенсировать это отступами дочерних.

Но непонятно, зачем всё это нужно, если есть гриды.
https://jsfiddle.net/qgdLw3z1/
Ответ написан
@eugenedrvnk Автор вопроса
Сейчас пришла идея, учитывая что я на vue это делаю, что можно просто делать без flex-wrap, а делить поступающий массив на нужное кол-во блоков и выводить их просто как отдельные, независимые блоки в которых идёт space-between. Но всё же, есть какой-то вариант css решения?
Ответ написан
@fhetushr
Начинающий программист самоучка
flex: 0 0 25%;
flex-wrap: wrap;
Ответ написан
exdude
@exdude
Я бы так сделал:
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы