Устанавливает, следует ли флекс-элементам располагаться в одну строку или можно занять несколько строк. Если перенос строк допускается, то свойство также позволяет контролировать направление, в котором выкладываются строки.
CSS синтаксис
Возможные значения
| Значение | Описание |
|---|---|
| nowrap | Значение по умолчанию. Флекс-элементы выстраиваются в одну линию и на новую строку не переносятся. |
| wrap | Флекс-элементы переносятся, располагаясь в несколько горизонтальных рядов (если не помещаются в один ряд) в направлении, установленном свойством flex-direction. |
| wrap-reverse | Флекс-элементы переносятся, располагаясь в противоположном установленному свойством flex-direction порядке, при этом перенос происходит снизу вверх. |
| inherit | Значение наследуется от родительского элемента. |
| initial | Устанавливает значение по умолчанию. |
Пример
Устанавливаем, чтобы флекс-элементы переносились на новую строку
Есть Flexbox сетка.
Как перенести .new-string на новую строку вместе с элементами, которые идут после него?
6 ответов 6
Примечание переводчика: flex-элемент (flex item) — непосредственный ребёнок блока с display: flex .
Наиболее простое и надёжное решение — это вставка flex-элементов в правильных местах. Если они достаточно широкие ( width: 100% ), они будут создавать перенос строки.
Но это уродливо и не семантически. Вместо этого, мы можем генерировать псевдоэлементы внутры flex-контейнера и использовать свойство order чтобы перемещать их в нужные места.
Но есть ограничение: flex-контейнер может иметь только псевдоэлементы ::before и ::after . Это значит, что мы можем создать только 2 переноса строки.
Чтобы разрешить это, вы можете генерировать псевдоэлементы внутри flex-элементов вместо flex-контейнера. Таким способом вы не будете ограничены двумя. Но эти псевдоэлементы не будут flex-элементами, поэтому не будут создавать переносы строк.
Но, к счастью, спецификация CSS Display L3 ввела display: contents (в данный момент поддерживаемая только Firefox 37):
Элемент сам по себе не генерирует никаких блоков, но его дети и псевдоэлементы генерируют блоки как обычно. С целью генерации блоков и разметки элемент будет расцениваться как будто он был заменён его детьми и псевдоэлементами в дереве документа.
Поэтому вы можете применять display: contents к детям flex-контейнера и обернуть содержимое каждого внутрь дополнительного блок. Таким образом flex-элементы будут этими дополнительными обёртками и псевдоэлементами детей.
Кроме того, в соответствии с Fragmenting Flex Layout и CSS Fragmentation, flexbox позволяет принудительные переносы с помощью break-before , break-after или их псевдонимов в CSS 2.1:
Принудительные переносы строк во flexbox ещё широко не поддерживаются, но они работают в Firefox.
На этой странице
Вы читаете английскую версию этой статьи, так как пока нет перевода на данный язык. Помогите нам перевести эту статью!
Свойство CSS flex-wrap задает правила вывода flex-элементов — в одну строку или в несколько, с переносом блоков. Если перенос разрешен, то возможно задать направление, в котором выводятся блоки.
| Начальное значение | nowrap |
|---|---|
| Применяется к | flex-контейнеры |
| Наследуется | нет |
| Отображение | визуальный |
| Обработка значения | как указано |
| Animation type | discrete |
| Канонический порядок | уникальный неоднозначный порядок, определённый формальной грамматикой |
See Using CSS flexible boxes for more properties and information.
Syntax
The flex-wrap property is specified as a single keyword chosen from the list of values below.
Значения
Допускаются следующие значения:
nowrap The flex items are laid out in a single line which may cause the flex container to overflow. The cross-start is either equivalent to start or before depending flex-direction value. wrap The flex items break into multiple lines. The cross-start is either equivalent to start or before depending flex-direction value and the cross-end is the opposite of the specified cross-start. wrap-reverse Behaves the same as wrap but cross-start and cross-end are permuted.
