Как сделать один flex элемент больше чем другие?

Question

[expp]

Есть флекс контейнер, в котором три элемента. Надо сделать один элемент широким, а два другие менее широкие и одинаковые по ширине. Пример представлен ниже.



Как это сделать?

Answer 1

[FODD]

Яб такое делал на гридах, там есть удобные функции для такого размещения.
Конкретно на флексах поиграйтесь с flex-grow у каждого элемента. Подозреваю, что достаточно будет указать flex-grow: 1 у маленьких плиток и 2 у большой

Comments

[expp]

Сейчас попробую, спасибо.

Answer 2

[Влад]

Задать flex-grow.
Самому большому 2, остальным 1.

Comments

[expp]

Но если задать ширину блокам, то другие картинки уже не поставить, верно? Спасибо за ответ.

[Влад]

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

[expp]

Влад Черников, Понял вас, спасибо)