Свойство flex-wrap
Свойство flex-wrap задает многострочную расстановку блоков по главной оси. Применяется к родительскому элементу для flex блоков. Входит в свойство-сокращение flex-flow .
Синтаксис
Значения
| Значение | Описание |
|---|---|
| nowrap | Однострочный режим — блоки выстраиваются в одну строку. |
| wrap | Блоки выстраиваются в несколько строк, если не помещаются в одну. |
| wrap-reverse | То же самое, что и wrap, но блоки выстраиваются в другом порядке (сначала последний, потом первый). |
Значение по умолчанию: nowrap .
Пример . Значение wrap
Сейчас блоки не помещаются в свой контейнер и выстроятся в несколько строк:
#parent < display: flex; flex-wrap: wrap; flex-direction: row; justify-content: space-between; border: 1px solid #696989; height: 200px; width: 330px; margin: auto; >#parent > div < width: 100px; height: 50px; border: 1px solid #696989; >
Пример . Значение wrap-reverse
А теперь порядок следования поменяется на обратный (смотрите на цифры внутри блоков):
#parent < display: flex; flex-wrap: wrap-reverse; flex-direction: row; justify-content: space-between; border: 1px solid #696989; height: 200px; width: 330px; margin: auto; >#parent > div < width: 100px; height: 50px; border: 1px solid #696989; >
Пример . Значение nowrap
Сейчас блоки будут располагаться в однострочном режиме (так по умолчанию). При этом значение ширины width для блоков будет проигнорировано, если оно мешает блокам помещаться в родителя. Обратите внимание на то, что блоки поместились в родителя, но их реальная ширина не 100px , как им задано, а меньше:
#parent < display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-between; border: 1px solid #696989; height: 200px; width: 330px; margin: auto; >#parent > div < width: 100px; height: 50px; border: 1px solid #696989; >
Пример . Значение nowrap
Однако, если блоки помещаются при заданной им ширине — то свойство width не будет проигнорировано. Уменьшим количество блоков так, чтобы они все влезли:
#parent < display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-between; border: 1px solid #696989; height: 200px; width: 330px; margin: auto; >#parent > div < width: 100px; height: 50px; border: 1px solid #696989; >
Смотрите также
- свойство flex-direction ,
которое задает направление осей flex блоков - свойство justify-content ,
которое задает выравнивание по главной оси - свойство align-items ,
которое задает выравнивание по поперечной оси - свойство flex-wrap ,
которое многострочность flex блоков - свойство flex-flow ,
сокращение для flex-direction и flex-wrap - свойство order ,
которое задает порядок flex блоков - свойство align-self ,
которое задает выравнивание одного блока - свойство flex-basis ,
которое задает размер конкретного flex блока - свойство flex-grow ,
которое задает жадность flex блоков - свойство flex-shrink ,
которое задает сжимаемость flex блоков - свойство flex ,
сокращение для flex-grow, flex-shrink и flex-basis
CSS свойство flex-wrap
Устанавливает, следует ли флекс-элементам располагаться в одну строку или можно занять несколько строк. Если перенос строк допускается, то свойство также позволяет контролировать направление, в котором выкладываются строки.
CSS синтаксис
flex-wrap: nowrap | wrap | wrap-reverse | initial | inherit;
Возможные значения
| Значение | Описание |
|---|---|
| nowrap | Значение по умолчанию. Флекс-элементы выстраиваются в одну линию и на новую строку не переносятся. |
| wrap | Флекс-элементы переносятся, располагаясь в несколько горизонтальных рядов (если не помещаются в один ряд) в направлении, установленном свойством flex-direction. |
| wrap-reverse | Флекс-элементы переносятся, располагаясь в противоположном установленному свойством flex-direction порядке, при этом перенос происходит снизу вверх. |
| inherit | Значение наследуется от родительского элемента. |
| initial | Устанавливает значение по умолчанию. |
Пример использования
Устанавливаем, чтобы флекс-элементы переносились на новую строку
CSS свойство flex-wrap 
CSS свойство flex-wrap определяет, будет ли флекс контейнер однострочным, или многострочным. По умолчанию контейнер является однострочным, для многострочных контейнеров допускается контролировать направление, в котором размещаются флекс элементы.
Обращаю Ваше внимание, если элемент не является флекс элементом (не находится внутри родительского элемента, который является блочным, или строчным флекс контейнером), то свойство flex-wrap не окажет на такой элемент никакого эффекта.
Схематичное отображение работы свойства flex-wrap отображено на следующем изображении:
Поддержка браузерами
| Свойство | Chrome | Firefox | Opera | Safari | IExplorer | Edge |
|---|---|---|---|---|---|---|
| flex-wrap |
29.0 21.0 -webkit- |
28.0 18.0 -moz- |
17.0 | 9.0 6.1 -webkit- |
11.0 | 12.0 |
flex-wrap: "nowrap | wrap | wrap-reverse | initial | inherit";
object.style.flexWrap = "wrap-reverse"
Значения свойства
| Значение | Описание |
|---|---|
| nowrap | Указывает, что флекс элементы выстраиваются в одну строку. Это значение по умолчанию. |
| wrap | Указывает, что флекс элементы внутри контейнера располагаются в несколько горизонтальных рядов (в случае переполнения). Флекс элементы размещаются слева направо при направлении ltr (глобальный HTML атрибут dir, либо CSS свойство direction со значением ltr ), а при значении rtl размещаются справа налево. |
| wrap-reverse | Указывает, что флекс элементы внутри контейнера располагаются в несколько горизонтальных рядов (в случае переполнения) по аналогии со значением wrap , но формирование строк идёт в обратном порядке. |
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Указывает, что значение наследуется от родительского элемента. |
Версия CSS
Наследуется
Анимируемое
Пример использования
Однострочные и многострочные флекс контейнеры .container display: -webkit-flex; /* для поддержки ранних версий браузеров */ display: flex; /* элемент отображается как блочный flex-контейнер */ -webkit-flex-wrap: nowrap; /* для поддержки ранних версий браузеров */ flex-wrap: nowrap; /* указывает, что флекс элементы выстраиваются в одну строку(это значение по умолчанию) */ > .container2 display: -webkit-flex; /* для поддержки ранних версий браузеров */ display: flex; /* элемент отображается как блочный flex-контейнер */ -webkit-flex-wrap: wrap; /* для поддержки ранних версий браузеров */ flex-wrap: wrap; /* указывает, что флекс элементы внутри контейнера располагаются в несколько горизонтальных рядов (в случае переполнения) */ > .container3 display: -webkit-flex; /* для поддержки ранних версий браузеров */ display: flex; /* элемент отображается как блочный flex-контейнер */ -webkit-flex-wrap: wrap-reverse; /* для поддержки ранних версий браузеров */ flex-wrap: wrap-reverse; /* по аналогии со значением wrap, но формирование строки идёт в обратном порядке */ > div > div используем селектор дочерних элементов (форматируем все элементы , вложенные внутрь элементов ) width: 40%; /* устанавливаем ширину блока */ height: 25px; /* устанавливаем высоту блока */ border: 1px solid orange; /* устанавливаем сплошную границу 1px оранжевого цвета */ > flex-wrap:nowrap; class = "container"> A B C flex-wrap:wrap; class = "container2"> A B C flex-wrap:wrap-reverse; class = "container3"> A B C
