CSS свойство flex-wrapcss3

CSS свойства

Определение и применение

CSS свойство flex-wrapcss3 определяет, будет ли флекс контейнер однострочным, или многострочным. По умолчанию контейнер является однострочным, для многострочных контейнеров допускается контролировать направление, в котором размещаются флекс элементы.


Обращаю Ваше внимание, если элемент не является флекс элементом (не находится внутри родительского элемента, который является блочным, или строчным флекс контейнером), то свойство flex-wrapcss3 не окажет на такой элемент никакого эффекта.


Схематичное отображение работы свойства flex-wrapcss3 отображено на следующем изображении:

Схематичное отображение работы свойства flex-wrap

Поддержка браузерами

СвойствоChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
flex-wrapcss329.0
21.0
-webkit-
28.0
18.0
-moz-
17.09.0
6.1
-webkit-
11.012.0

CSS синтаксис:

flex-wrap: "nowrap | wrap | wrap-reverse | initial | inherit";

JavaScript синтаксис:

object.style.flexWrap = "wrap-reverse"

Значения свойства

ЗначениеОписание
nowrapУказывает, что флекс элементы выстраиваются в одну строку. Это значение по умолчанию.
wrapУказывает, что флекс элементы внутри контейнера располагаются в несколько горизонтальных рядов (в случае переполнения). Флекс элементы размещаются слева направо при направлении ltr (глобальный HTML атрибут dir, либо CSS свойство direction со значением ltr), а при значении rtl размещаются справа налево.
wrap-reverseУказывает, что флекс элементы внутри контейнера располагаются в несколько горизонтальных рядов (в случае переполнения) по аналогии со значением wrap, но формирование строк идёт в обратном порядке.
initialУстанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Версия CSS

CSS 3

Наследуется

Нет.

Анимируемое

Нет.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title>Однострочные и многострочные флекс контейнеры</title>
<style> 
.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 { используем селектор дочерних элементов (форматируем все элементы <div>, вложенные внутрь элементов <div>)
width: 40%; /* устанавливаем ширину блока */
height: 25px;  /* устанавливаем высоту блока */
border: 1px solid orange;  /* устанавливаем сплошную границу 1px оранжевого цвета */
} 
</style>
</head>
	<body>
		<h3>flex-wrap:nowrap;</h3>
		<div class = "container">
			<div>A</div>
			<div>B</div>
			<div>C</div>
		</div>
		<h3>flex-wrap:wrap;</h3>
		<div class = "container2">
			<div>A</div>
			<div>B</div>
			<div>C</div>
		</div>
		<h3>flex-wrap:wrap-reverse;</h3>
		<div class = "container3">
			<div>A</div>
			<div>B</div>
			<div>C</div>
		</div>
	</body>
</html>

Результат примера:

Пример использования CSS свойства flex-wrap (однострочные и многострочные флекс контейнеры).
Пример использования CSS свойства flex-wrap (однострочные и многострочные флекс контейнеры).
CSS свойства