Расположение блоков flexbox?

Question

[Алексей]

Здравствуйте.
Нужно расположить блоки в таком порядке, как на картинке. С помощью какого flexbox свойства это можно реализовать ?

Comments

[Lynn «Кофеман»]

Никакого

Гриды или таблицы

[Ankhena]

С помощью какого flexbox свойства это можно реализовать ?

С помощью фиксированной высоты и flex-direction: columns. Ну и order.
Но в вебе так обычно нельзя.

Легко - гридами.

Таблицами, но только если у вас табличные данные.

float - со своими ограничениями, clearfix и только если 2 в коде первый. 1 и 3 не будут знать про высоту 2.

Абсолют - тоже можно, но со своими нюансами. Остальные блоки ничего не будут знать о размерах 2.

Answer 1

[xwjkka]

Обязательно flexbox? Просто по-моему тут удобнее использовать grid.

для всего блока:

display: grid
grid-template-columns: repeat(2, 1fr)

для второго элемента в блоке

grid-row: span 2;

Comments

[xwjkka]

вот нашла информацию о флексах и гридах.

Флексы — одномерные. Это значит, что управлять расположением в рядах нельзя.
Гриды — для каркаса сайта, флексы — для контента.

Статья в html academy