Как сверстать 8 элементов в 2 ряда на flexbox?

Question

[finchzet]

Есть 8 элементов, которые располагаются в 2 строки (по 4 элемента в каждой). Все одинаковой ширины (270px) + расстояние между ними в 20 пикселей.
Как правильно сверстать на flexbox чтоб при адаптиве было все красиво?

Answer 1

[Рома Зварич]

Сверстал для Вас пример макета.
Надеюсь, правильно понял вопрос.

Точки переходов можете сами подобрать.
Если есть дополнительные вопросы или я что-то неправильно понял, пишите

https://codepen.io/hisbvdis/pen/wVvVvw

Comments

[s0xzwasd]

space-between всегда делает хуже: https://i.imgur.com/CYTmKCk.png

[Рома Зварич]

s0xzwasd, сделал на этом разрешении "space-around". Проверьте. Так лучше?

[Виталий]

Рома Зварич, Вот так лучше https://codepen.io/L2Banners/pen/JgoWRv

[Рома Зварич]

Виталий, как вариант, да. Тут уже визуально как больше нравится.

Answer 2

[profesor08]

Два ряда по 4, 4 элементов
Три ряда по 3, 3, 2 элементов
Четыре ряда по 2, 2, 2, 2 элементов
Восемь рядов по одному элементу

Comments

[finchzet]

Остался вопрос, как реализовать это

[Ярослав Иванов]

finchzet, обратился на фриланс.

[Шохрух Шаймардонов]

finchzet, берете и гуглите flexbox. Там покажут какие свойства и для чего они