Как спозиционировать flex-элементы внутри контейнера?

Question

[Евгений Гайдуков]

Салют!
Народ, подскажите, в "черном" флекс-контейнере имеются "цветные" флекс-элементы.

Хочу их раскидать примерно как на картинке, а получается лишь или в строку или в колонку. Это реально?

Answer 1

[Lam Besis]

К сожалению, на чистых флексах не получится, сетка у вас двумерная, а флексы - технология одномерная.
Вам нужно будет добавить обертку для блоков справа (набросала пример). Разметка такая же, как в ответе выше, но реализация стилей по другому сделана.
Если принципиально необходимо решение без обертки, то делать или гридами, или как вариант, с помощью бутстраповской сетки v3.3.7

Comments

[Евгений Гайдуков]

Спасибо!

Answer 2

[tempick]

Да, реально. Для черного блока:

display:flex;
flex-direction:column;

Все блоки, которые под оранжевым, оборачиваете в див и задаете

display:flex;
flex-direction:row; /*Можно и не писать это, написал для поняности*/

А все блоки справа (желтый, голубой фиолетовый) также оборачиваете в див и задаете

display:flex;
flex-direction:column;

Ну и по выравниванию там уже сами подберете свойства. Но в целом макет получается такой.

Comments

[Евгений Гайдуков]

Большое спасибо!
Ну и соответственно, если у меня 2 одинаковых черных блока, то я их также оборачиваю в 1 див, а потом позиционирую по сторонам?