Как указать элемент, после которого можно вставить css flexbox?

Я не думаю, что это часть стандарта 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/

Ответ 1

Вы можете выполнить это, установив это в контейнере:

ul {
    display: flex;
    flex-wrap: wrap;
}

А для ребенка вы установите это:

li:nth-child(2n) {
    flex-basis: 100%;
}

Это заставляет ребенка составлять 100% ширины контейнера перед любыми другими вычислениями. Поскольку в контейнер установлен разрыв, если недостаточно места, он делает это до и после этого дочернего элемента.

Ответ 2

=========================

Вот статья с полным списком вариантов: 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 также дает отличный ответ

Ответ 3

Есть часть спецификации, которая, несомненно, звучит так: прямо в разделах "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;
}

Однако я пробовал это, и он не был реализован таким образом в...

Safari (до 7)
Chrome (до 43 dev)
Опера (до 28 dev и 12.16)
IE (до 11)

Он работает так, как он звучит (по крайней мере, мне), например:

Firefox (28 +)

Образец в 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. Что-то может быть добавлено в какой-то момент для этого, можно надеяться.

Ответ 4

Установка минимальной ширины для дочерних элементов также создаст точку останова. Например, разбивая каждые 3 элемента,

flex-grow: 1;
min-width: 33%;

Если есть 4 элемента, это будет иметь обертывание 4-го элемента, набрав 100%. Если есть 5 элементов, 4-й и 5-й элементы будут обертываться и принимать каждые 50%.

Удостоверьтесь, что у родительского элемента есть

flex-wrap: wrap

Ответ 5

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

Однако, если вы не можете растянуть элемент до 100% (например, если он <img>), вы можете применить к нему поле, например width: 50px; margin-right: calc(100% - 50px) width: 50px; margin-right: calc(100% - 50px).