Почему не работает вертикальное выравнивание с помощью flex?

Question

[Vasyl Pylypiv]

Стараюсь сделать вот такой шаблон:


Столкнулся с несколькими проблемами:

1. Не работает вертикальное выравнивание с помощью flex над верхней надписи в header´е, на 3 нижних розовых div'aх и на оранжевых.

2. Не могу сделать чтоб нижние розовые div'ы были одинаковой минимальной ширины, и одновременно "резиновыми". Возможно ли такое ?

codepen.io/VasylPylypiv/pen/ZGramM

Answer 1

[Murat Atila]

Вам принципиально нужен flex?

Comments

[Vasyl Pylypiv]

Совсем не принципиально, но ничего проще и легче, пока не придумал. Можете посоветать другой способ решение проблем ?

[Murat Atila]

Посмотрите в сторону
display: inline-block;
он позволяет сделать всё что вам нужно

Answer 2

[Хазрат Гаджикеримов]

FlexBOX за 5 минут

Comments

[Vasyl Pylypiv]

Не совсем позволяет решить вопрос №2. Мне нужно пустое место между div'ами. С помощью этого сервиса не могу такого сделать.

[Хазрат Гаджикеримов]

Vasyl Pylypiv: min-width: 250px;