Как сделать wrap только после изменения размера блока?

Question

[profcat]

Здравствуйте. Есть flex-контейнер размером 1140px. В нём два блока по 570px. Задача сделать перенос блока на следующую строку только когда он уменьшится до, допустим, половины своей длины.

Пока что воспользовался медиа-запросом, инфы не нашел по решению. Везде читаю, что при flex медиа не нужны. Как тогда быть?

Comments

[Rustam Bainazarov]

С какого бока при flex media перестали быть нужны? Где это везде про такое написано, не поделитесь?

[Lord_Dantes]

Рустам Байназаров, видимо на сайтах где используется бутстрап 4 xd

Answer 1

[WhiteBearDev]

Вы можете указать ширину внутренних блоков в процентах, например, 50%. И минимальную ширину блока min-width. В Вашем случае, по половине своей длины 285px. Итого при уменьшении размеров блоков до величины меньшей или равной 285px, блок будет перемещен на вторую строку.

https://jsfiddle.net/b1jzof78/7/

И нет ничего зазорного в использовании media-запросов c flex, это нормально :-)

Comments

[profcat]

Большое спасибо, добрый человек