Я не думаю, что это часть стандарта flexbox, но может быть, трюк предложить или заставить обертывание после определенного элемента? Я хотел бы ответить на разные размеры страниц и поместить список по-разному без дополнительной разметки, чтобы вместо того, чтобы иметь (например) осиротевшие пункты меню на следующей строке, я разбиваю посередине меню.
Здесь стартовый html:
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
И css:
ul {
display: flex;
flex-wrap: wrap;
}
Мне понравилось бы следующее:
/* inside media query targeting width */
li:nth-child(2n) {
flex-break: after;
}
См. jsfiddle для более полной настройки: http://jsfiddle.net/theazureshadow/ww8DR/
Вы можете выполнить это, установив это в контейнере:
ul {
display: flex;
flex-wrap: wrap;
}
А для ребенка вы установите это:
li:nth-child(2n) {
flex-basis: 100%;
}
Это заставляет ребенка составлять 100% ширины контейнера перед любыми другими вычислениями. Поскольку в контейнер установлен разрыв, если недостаточно места, он делает это до и после этого дочернего элемента.
=========================
Вот статья с полным списком вариантов: https://tobiasahlin.com/blog/flexbox-break-to-new-row/
РЕДАКТИРОВАТЬ: это действительно легко сделать с Grid сейчас: https://codepen.io/anon/pen/mGONxv?editors=1100
=========================
Я не думаю, что вы можете сломать после определенного элемента. Лучшее, что вы можете сделать, это изменить flex-base на ваших точках останова. Так:
ul {
flex-flow: row wrap;
display: flex;
}
li {
flex-grow: 1;
flex-shrink: 0;
flex-basis: 50%;
}
@media (min-width: 40em;){
li {
flex-basis: 30%;
}
Вот образец: http://cdpn.io/ndCzD
============================================
РЕДАКТИРОВАТЬ: Вы можете сломать после определенного элемента! Хейдон Пикеринг рассказал о волшебстве css в статье A List Apart: http://alistapart.com/article/quantity-queries-for-css
РЕДАКТИРОВАТЬ 2: Пожалуйста, посмотрите на этот ответ: разрыв строки в многострочном flexbox
@luksak также дает отличный ответ
Есть часть спецификации, которая, несомненно, звучит так: прямо в разделах "flex layout algorithm" и "main sizing":
В противном случае, начиная с первого несохраненного элемента, собирайте последовательные пункты один за другим до первого раза, когда следующий собранный элемент не поместился бы в внутренние контейнеры для гибких контейнеров размера или до тех пор, пока не произойдет принудительный разрыв. Если первый неповрежденный элемент не подойдет, соберет его только в линию. Перерыв принудительно, когда CSS2.1-страница-break-before/page-break-after [CSS21] или свойства CSS3 break-before/break-after [CSS3-BREAK] укажите разрыв фрагментации.
От http://www.w3.org/TR/css-flexbox-1/#main-sizing
Наверное, это звучит (кроме того, что разрывы страниц должны быть для печати), когда выкладываете потенциально многострочный гибкий макет (который я беру из другой части спецификации, без flex-wrap: nowrap), a page-break-after: always или break-after: always должен вызвать разрыв или обернуть следующую строку.
.flex-container {
display: flex;
flex-flow: row wrap;
}
.child {
flex-grow: 1;
}
.child.break-here {
page-break-after: always;
break-after: always;
}
Однако я пробовал это, и он не был реализован таким образом в...
Он работает так, как он звучит (по крайней мере, мне), например:
Образец в http://codepen.io/morewry/pen/JoVmVj.
Я не нашел других запросов в трекере ошибок, поэтому я сообщил об этом https://code.google.com/p/chromium/issues/detail?id=473481.
Но тема попала в список рассылки и, независимо от того, как это звучит, это не то, что, по-видимому, они подразумевали, за исключением того, что я предполагаю, что для разбивки на страницы. Таким образом, нет способа обернуть до или после определенного поля в гибкой макете, не вставляя последовательные гибкие макеты внутри гибких детей или играя с определенной шириной (например, flex-basis: 100%).
Это очень раздражает, конечно, поскольку работа с реализацией Firefox подтверждает мое подозрение, что функциональность невероятно полезна. Помимо улучшенного вертикального выравнивания, недостаток устраняет значительную часть гибкости в многочисленных сценариях. Чтобы добавить дополнительные теги обертки с вложенными гибкими макетами, чтобы контролировать точку, в которой обертывает строка, увеличивает сложность как HTML, так и CSS и, к сожалению, часто делает ненужным order. Точно так же, заставляя ширину элемента 100% уменьшать "отзывчивый" потенциал гибкого макета или требует много особо специфических запросов или селекторов подсчета (например, методы, которые могут выполнить общий результат, который вам нужен, упомянутые в другие ответы).
По крайней мере поплавки имели clear. Что-то может быть добавлено в какой-то момент для этого, можно надеяться.
Установка минимальной ширины для дочерних элементов также создаст точку останова. Например, разбивая каждые 3 элемента,
flex-grow: 1;
min-width: 33%;
Если есть 4 элемента, это будет иметь обертывание 4-го элемента, набрав 100%. Если есть 5 элементов, 4-й и 5-й элементы будут обертываться и принимать каждые 50%.
Удостоверьтесь, что у родительского элемента есть
flex-wrap: wrap
Единственное, что, кажется, работает - это установить flex-wrap: wrap; на контейнере и их как-то сделать потомком, которого вы хотите вырвать после заполнения на полную ширину, поэтому width: 100%; должно сработать.
Однако, если вы не можете растянуть элемент до 100% (например, если он <img>), вы можете применить к нему поле, например width: 50px; margin-right: calc(100% - 50px) width: 50px; margin-right: calc(100% - 50px).