Css flex перенос строки

Устанавливает, следует ли флекс-элементам располагаться в одну строку или можно занять несколько строк. Если перенос строк допускается, то свойство также позволяет контролировать направление, в котором выкладываются строки.

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 typediscrete
Канонический порядокуникальный неоднозначный порядок, определённый формальной грамматикой

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.

Оцените статью
Ремонт оргтехники
Добавить комментарий