Как принудительно перенести flex элемент на новую строку?

Question

[Александр]

Есть flex контейнер с flex-wrap: wrap. Необходимо перенести определённый элемент внутри этого контейнера на новую строку, независимо от того помещается он там или нет. Никаких конкретных размеров не известно, соседние элементы могут иметь произвольную ширину. Так же нужно чтобы после этого элемента, который мы перенесём могли идти следующие элементы, то есть чтобы этот элемент не занимал всю новую строку.

Comments

[alex_adria]

как по итогу решили вопрос?

Answer 1

[Froggyweb]

Bootstrap вставляет костыль с дивом 100% и 0 высотой. Бэк ту div class="clearfix" :)
Как вариант предыдущему диву дать маргин.паддинг оставшегося места

Comments

[Александр]

Проблема в том, что я не знаю сколько осталось места..

[Александр]

Но костыльный div это уже что-то)

[Froggyweb]

LordGuard, Как вариант display: grid поддержка почти одинаковая.

[Opanagushin]

LordGuard,

Проблема в том, что я не знаю сколько осталось места..

а каким образом определяется, что пора сделать перенос дива?

[Александр]

Opanagushin, просто в соответствие с макетом есть конкретный элемент, который начинается с новой строки.

[Opanagushin]

если не нравится фейковый див, то можно сделать у контенера flex-direction: column и для строк использовать дивы внутри которых будут распологаться те самые элементы. но фейковый див проще :)

[Александр]

Opanagushin, да, я думал об этом. Но тут вся суть что мне для адаптивности нужна возможно переставить элементы с помощью order.

[Opanagushin]

значит точно фейковый див, только его еще надо иногда прятать через media query

Answer 2

[profesor08]

css: orderer
css: align-self
Такое ощущение что никто не учил и не разбирался что такое flex и как его применять.

Comments

[Froggyweb]

order переставляет дивы
align-self а это куда?
Как я понял нужен аналог clear: both

[Александр]

Вы какую-то ерунду написали, которая никаким образом не относится к решению проблемы. Оба свойства я отлично знаю.

[profesor08]

LordGuard, флекс как минимум должен решать проблему float и cleafix'ов. Если возникает необходимость в такой дряни, то кто-то что-то делает не так.

Answer 3

[ZardoZAntony]

<div style="flex-basis: 100%; height: 0;"></div>