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

Question

[eugenedrvnk]

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

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



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


Сейчас пришла идея, учитывая что я на vue это делаю, что можно просто делать без flex-wrap, а делить поступающий массив на нужное кол-во блоков и выводить их просто как отдельные, независимые блоки в которых идёт space-between. Но всё же, есть какой-то вариант css решения?

Answer 1

[Ankhena]

1. Вам не нужен space-between.
Потому что следующим ходом выяснится, что если число дочерних блоков не кратно 4, то выглядит плохо.
2. Если ширина обертки и дочерних блоков фиксирована, то просто используйте

.item:not(:nth-child(4n)) {
  margin-right: calc(100px / 3);
}

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

Но непонятно, зачем всё это нужно, если есть гриды.
https://jsfiddle.net/qgdLw3z1/

Answer 2

[eugenedrvnk]

Сейчас пришла идея, учитывая что я на vue это делаю, что можно просто делать без flex-wrap, а делить поступающий массив на нужное кол-во блоков и выводить их просто как отдельные, независимые блоки в которых идёт space-between. Но всё же, есть какой-то вариант css решения?

Answer 3

[Артём Елисейкин]

flex: 0 0 25%;
flex-wrap: wrap;

Comments

[Артём Елисейкин]

И отступ сделать padding или margin (Понял, что не прав, ведь нужно через space-between)

[eugenedrvnk]

Тогда блоки занимают всю ширину, и маржинами с паддингами вроде как нельзя сделать так, что бы блоки повторяли конструкцию как при space-between. (на скрине в вопросе)

Answer 4

[exdude]

Я бы так сделал:

Comments

[eugenedrvnk]

это как раз тот вариант, который мне спустя пару минут после отправки вопроса пришёл) но тем не менее, всё ещё любопытно, можно ли сделать изначальную задачу лишь через css flex-wrap минуя создание блоков под каждый ряд.

[exdude]

eugenedrvnk, только так смог:

[eugenedrvnk]

exdude, я тоже к подобному варианту приходил, либо ещё создавал обёртки и там пытался позиционировать, но к нужном рез-ту так и не пришёл)
В любом случае, спасибо за помощь и уделённое время