Как через flexbox реализовать такую схему, не могу сообразить?

Question

[Юра Сторчака]

Можно ли 2 флекс контейнера уместить в одной строчке , то есть сделать один контейнер сделать с флекс элементов
и сделать второй контейнер с двумя флекс элементами

Answer 1

[Gortyser]

Контейнеру, в котором все это лежит:

display: flex;
justify-content: space-between

Потом запихнуть два маленьких блока в еще один контейнер и задать ему:

display: flex;
flex-direction: column;
justify-content: space-between;

Comments

[Юра Сторчака]

я правильно понял, я могу через flexbox в один контейнер, где будет один флекс элемент , еще плюс вкладывать второй контейнер, где будет 2 флекс элемента , этам схема работает ?

[Gortyser]

Работает

[Юра Сторчака]

Gortyser, спасибо, все работает
а есть функция в флексбоксе , если не задана высота и ширина флекс элемента , чтобы в флекс контейнеры все элементы пропорционально самостоятельно увеличивались и заполняли весь флекс контейнер ?

[Юра Сторчака]

или в зависимости от текста внутри флекс элемента чтобы флекс элемент увеличивался , и текст не выходил за рамки флекс элемента ?

[Gortyser]

Юра Сторчака, Ищите
Конкретно для пропорционального увеличения смотрите свойство flex-grow.

[Dima Polos]

Юра Сторчака, flex-grow задаете тем элементам, которые должны забрать пустое пространство, причем flex-grow задается в единицах без рх или %, если есть два флекс-элемента у одного flex-grow: 1, а у второго flex-grow: 2, то первый будет занимать пространство по контенту + 1/3 часть свободного пространства, а второй - свое пространство по контенту + 2/3. Эти два элемента делят оставшееся пространство на 3 части и каждый забирает дополнительно 1 часть и 2 части соответственно.

Answer 2

[xXRustamXx]

Да можно.