flex-wrap
Baseline is determined by this web feature being supported on the current and the previous major versions of major browsers.
Свойство CSS flex-wrap задаёт правила вывода flex-элементов — в одну строку или в несколько, с переносом блоков. Если перенос разрешён, то возможно задать направление, в котором выводятся блоки.
Интерактивный пример
| Начальное значение | nowrap |
|---|---|
| Применяется к | flex-контейнеры |
| Наследуется | нет |
| Обработка значения | как указано |
| Animation type | discrete |
Подробнее о свойствах и дополнительную информацию смотрите Основные понятия Flexbox.
Синтаксис
flex-wrap: nowrap; /* Default value */ flex-wrap: wrap; flex-wrap: wrap-reverse; /* Глобальные значения */ flex-wrap: inherit; flex-wrap: initial; flex-wrap: revert; flex-wrap: revert-layer; flex-wrap: unset;
Свойство flex-wrap может содержать одно из следующих ниже значений.
Значения
Допускаются следующие значения:
Расположение в одну линию, может привести к переполнению контейнера. Свойство cross-start эквивалентно start или before в зависимости от значения flex-direction .
Расположение в несколько линий. Свойство cross-start эквивалентно start или before в зависимости от значения flex-direction и свойство cross-end противоположно cross-start.
Ведёт себя так же, как и wrap , но cross-start и cross-end инвертированы.
Формальный синтаксис
flex-wrap =
nowrap | (en-US)
wrap | (en-US)
wrap-reverse
Примеры
HTML
h4>This is an example for flex-wrap:wraph4> div class="content"> div class="red">1div> div class="green">2div> div class="blue">3div> div> h4>This is an example for flex-wrap:nowraph4> div class="content1"> div class="red">1div> div class="green">2div> div class="blue">3div> div> h4>This is an example for flex-wrap:wrap-reverseh4> div class="content2"> div class="red">1div> div class="green">2div> div class="blue">3div> div>
CSS
/* Common Styles */ .content, .content1, .content2 color: #fff; font: 100 24px/100px sans-serif; height: 150px; text-align: center; > .content div, .content1 div, .content2 div height: 50%; width: 50%; > .red background: orangered; > .green background: yellowgreen; > .blue background: steelblue; > /* Flexbox Styles */ .content display: flex; flex-wrap: wrap; > .content1 display: flex; flex-wrap: nowrap; > .content2 display: flex; flex-wrap: wrap-reverse; >
Результат
Спецификации
| Specification |
|---|
| CSS Flexible Box Layout Module Level 1 # flex-wrap-property |
Совместимость с браузерами
BCD tables only load in the browser
Перенос элементов в контейнере — CSS: Основы Flex
При использовании флекс-контейнера элементы стараются вместиться в него без переноса строки. При этом элементы внутри контейнера ведут себя примерно как строчные элементы — занимают только то пространство, которое им необходимо.
Что же произойдет, если элементам внутри контейнера не хватит места? По логике контейнера элементы обязаны располагаться в одну строку, если не указано другое. Поэтому элементы внутри просто начнут выходить за пределы контейнера, но останутся в одной строке. Это может быть немного неочевидно, но такое поведение частенько помогает сверстать макет, например, эта особенность пригодится при верстке слайдеров.
Добавим отступы у элементов внутри контейнера, чтобы вы могли увидеть его реальную ширину. Такое поведение хоть и бывает полезным, но не является ожидаемым в большинстве случаев. Как в таком случае переносить элементы? Для этого существует свойство flex-wrap, которое говорит контейнеру переносить дочерние элементы при нехватке места.
Свойство flex-wrap может принимать одно из трех значений:
- nowrap. Стандартное поведение флекс-контейнера. Элементы не переносятся и располагаются в одну строку даже при нехватке места.
- wrap. Данное значение говорит перенести элементы внутри контейнера при нехватке места.
- wrap-reverse. То же самое, что и wrap, но происходит не просто перенос, а переворот блоков по главной оси. В данном случае строка со значениями 1 и 2 окажется ниже, в отличие от ситуации с использованием простого wrap
Использование flex-wrap — отличный выбор при создании адаптивных сайтов. Хоть одно свойство и не может решить всех проблем сразу, но его использование на основном каркасе сайта поможет автоматически переносить элементы на новую строку при нехватке места на мобильных устройствах.
Открыть доступ
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно
- 130 курсов, 2000+ часов теории
- 1000 практических заданий в браузере
- 360 000 студентов
Наши выпускники работают в компаниях:
white-space
normal Текст в окне браузера выводится как обычно, переносы строк устанавливаются автоматически. nowrap Пробелы не учитываются, переносы строк в коде HTML игнорируются, весь текст отображается одной строкой; вместе с тем, добавление тега
переносит текст на новую строку. pre Текст показывается с учетом всех пробелов и переносов, как они были добавлены разработчиком в коде HTML. Если строка получается слишком длинной и не помещается в окне браузера, то будет добавлена горизонтальная полоса прокрутки. pre-line В тексте пробелы не учитываются, текст автоматически переносится на следующую строку, если он не помещается в заданную область. pre-wrap В тексте сохраняются все пробелы и переносы, однако если строка по ширине не помещается в заданную область, то текст автоматически будет перенесен на следующую строку. inherit Наследует значение родителя.
Действие значений на текст представлено в табл. 1.
| Значение | Перенос текста | Пробелы |
|---|---|---|
| normal | Переносится | Не учитываются |
| nowrap | Не переносится | Не учитываются |
| pre | Не переносится | Учитываются |
| pre-line | Переносится | Не учитываются |
| pre-wrap | Переносится | Учитываются |
HTML5 CSS2.1 IE Cr Op Sa Fx
white-space
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства white-space
Объектная модель
[window.]document.getElementById(» elementID «).style.whiteSpace
Браузеры
Браузер Internet Explorer до версии 7.0 включительно не поддерживает значения pre-line , pre-wrap и inherit . Для значения normal и pre ведут себя как pre-wrap , а значение nowrap ведет себя как pre-line .
Opera до версии 9.5 не поддерживает значение pre-line . Для значения normal и pre ведут себя как pre-wrap , а значение nowrap ведет себя как pre-line .
Safari до версии 3.0 и iOS не поддерживают значения pre-wrap и pre-line .
Firefox до версии 2.0 включительно не поддерживает значения pre-line и pre-wrap . Для значения normal , nowrap , и pre воспринимаются как pre-wrap .
Как принудительно перенести flex элемент на новую строку?
Есть flex контейнер с flex-wrap: wrap. Необходимо перенести определённый элемент внутри этого контейнера на новую строку, независимо от того помещается он там или нет. Никаких конкретных размеров не известно, соседние элементы могут иметь произвольную ширину. Так же нужно чтобы после этого элемента, который мы перенесём могли идти следующие элементы, то есть чтобы этот элемент не занимал всю новую строку.
- Вопрос задан более трёх лет назад
- 14510 просмотров
1 комментарий
Средний 1 комментарий