Построить данную сетку на :flex — возможно?

Question

[Сергей Софьичев]

Добрый день. Суть в том чтобы построить данную сетку с помощью display: flex;

Answer 1

[Николай]

Ну например так:
https://plnkr.co/edit/cXb13pOCDBfWRJXANL9l?p=preview

Comments

[Сергей Софьичев]

спасибо, думаю подходящее решение.

[Михаил Чирский]

Хорошее решение, ну зачем вы используете flex-direction: row? если это значение по умолчанию, и space-around у вас лишний, без него все также работает, в целом решение хорошее, мне понравилось) Спасибо

[Николай]

Михаил Чирский: по поводу flex-direction привычка, с дефолтными значениями вроде как есть косяки в IE. В данном конкретном случае space-around не нужен, т.к. у блоков стоит flex: 1, тут вы правы.

Answer 2

[Михаил Чирский]

Например так
https://jsfiddle.net/aw1yykt1/

Ну если под адаптивку, нужно подумать будет, это под фиксированные размеры)

Comments

[Сергей Софьичев]

спасибо , но немного мимо. Много лишней разметки. В идеале вообще все блоки в одном родителе

Answer 3

[Fetur]

Можно сделать как ты хочешь через float и все в одном родителе. Решение выкладывать не буду, слишком легко, сам справишься.

Comments

[Сергей Софьичев]

суть в том, что хочу по возможности отказаться от float`ов

[Fetur]

Сергей Софьичев: Но зачем? float'ы являются кросс браузерным решением, не имеют багов в IE. Я лично flex'ы вижу только пока как для грубой разметки страницы, но не для элементов на странице. Все равно, без "костылей" как на картинке у вас вы не сделаете нормально.