flex-wrap

Baseline Широко доступно

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с сентября 2015 года.

Свойство flex-wrap CSS задает, будут ли элементы flex размещаться на одной строке или могут переносить на несколько строк. Если перенос разрешен, оно задаёт направление, в котором строки будут выстраиваться.

Попробуйте

Сокращённое свойство flex-flow может использоваться для задания свойств flex-direction и flex-wrap, которые определяют главную и поперечную оси flex контейнера соответственно.

Синтаксис

flex-wrap: nowrap; /* Default value */
flex-wrap: wrap;
flex-wrap: wrap-reverse;

/* Global values */
flex-wrap: inherit;
flex-wrap: initial;
flex-wrap: revert;
flex-wrap: revert-layer;
flex-wrap: unset;

Значения

Свойство flex-wrap задаётся одним ключевым словом, выбранным из следующих значений:

nowrap: Элементы flex выстраиваются в одну строку, что может привести к переполнению flex контейнера. Начало поперечной оси эквивалентно inline-start или block-start, в зависимости от значения flex-direction. Это значение по умолчанию.
wrap: Элементы flex разбиваются на несколько строк. Начало поперечной оси эквивалентно inline-start или block-start, в зависимости от текущего направления письма и значения flex-direction.
wrap-reverse: Ведёт себя так же, как wrap, но начало и конец поперечной оси инвертированы.

Формальное определение

Начальное значение	`nowrap`
Применяется к	flex контейнерам
Наследуется	нет
Вычисленное значение	как указано
Тип анимации	дискретный

Формальный синтаксис

flex-wrap = 
  nowrap        |
  wrap          |
  wrap-reverse

Примеры

Установка значений flex контейнера wrap

HTML

<h4>This is an example for flex-wrap:wrap</h4>
<div class="content">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>
<h4>This is an example for flex-wrap:nowrap</h4>
<div class="content1">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>
<h4>This is an example for flex-wrap:wrap-reverse</h4>
<div class="content2">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>

CSS

/* Common Styles */
.content,
.content1,
.content2 {
  color: #fff;
  font: 100 24px/100px sans-serif;
  height: 150px;
  width: 897px;
  text-align: center;
}

.content div,
.content1 div,
.content2 div {
  height: 50%;
  width: 300px;
}
.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;
}

Результаты

Спецификации

Спецификация
CSS Flexible Box Layout Module Level 1 # flex-wrap-property

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`flex-wrap`	2921	12	28	1615	97	2925	28	1614	97	2.01.5	4.44.4
`nowrap`	21	12	28	15	7	25	28	14	7	1.5	4.4
`wrap`	21	12	28	15	7	25	28	14	7	1.5	4.4
`wrap-reverse`	21	12	28	15	7	25	28	14	7	1.5	4.4

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap