Как в Flex CSS распределить блоки по желанию?

Question

[eldar_web]

Вот пример:
codepen.io/anon/pen/zZqqYR
Я хочу чтобы в главном блоке шесть блоков распределились по 3-3 блока, т.е., три наверху, и три снизу.
Можно ли это сделать хорошим образом (как я знаю, можно задавать блокам ширину = 100%/3, но это не хороший вариант) ?

Comments

[Ольга Ветер]

а почему плохой-то?

[Ankhena]

И чем плохи 33%?
Не нравится width, напишите flex.

[eldar_web]

Ольга Ветер: ну не делится конкретно. Зачем писать 33.333333333%?

[eldar_web]

Ankhena W: Вот и на flex же говорю как реализовать.

[Ankhena]

eldar_web: да также, 33% ну или 33.33%
Не берите в голову. Флекс нужен для адаптивности. Ширина браузера в точках тоже не всегда делится на 3, браузер все раво будет заниматься вычислениями и округлениями до целых пикселей.

[eldar_web]

Ankhena W: ну ладно, я захочу добавить к ним margin-ы в px, тогда нарушится порядок. Как быть?

[Ankhena]

eldar_web:
- использовать calc
- padding вместо margin
- margin в %, а не в px

Когда использовали инлайн-блоки или флоаты, все было ровно также. Ничего непривычного не случилось.

Answer 1

[Ilaj Osmanov]

Flex-basis:33% - дочерним
Justify-content: space-beetwen и flex-flow: row wrap; - родителям

Comments

[eldar_web]

Я думал просто цифрами получится указать во флексе. А что если я захочу задать маргины блокам в px?
Тогда нарушится порядок.

[Ilaj Osmanov]

Зачем тебе маргины? Justify-content сам расположит их. В том то дело что маргины не нужны

[Ilaj Osmanov]

А вообще, если без ширины, то все от контента будет зависеть. Flex: 1 1 auto