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

CSS свойства

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

CSS свойство flex-flowcss3 позволяет в одном объявлении указать значения свойств flex-directioncss3(задает направление, в соответствии с которым располагаются флекс элементы внутри флекс контейнера), и flex-wrapcss3 (определяет, будет ли флекс контейнер однострочным, или многострочным). До использования в работе свойства flex-flowcss3, я рекомендую Вам ознакомиться с перечисленными свойствами по отдельности.


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


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

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

CSS синтаксис:

/* только направление */
flex-flow:"flex-direction";

/* однострочный, или многострочный */
flex-flow:"flex-wrap";

/* оба свойства в одном объявлении */
flex-flow:"flex-direction flex-wrap | initial | inherit";

JavaScript синтаксис:

object.style.flexFlow = "column wrap"

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

ЗначениеОписание
flex-directionУказывает направление, в соответствии с которым располагаются флекс элементы внутри контейнера.

Направление элементов формируется исходя из положения двух осей: главной оси контейнера и поперечной оси, которая всегда распологается перпендикулярно главной. Главная ось при направлении ltr (глобальный HTML атрибут dir, либо CSS свойство direction со значением ltr) располагается слева направо, а поперечная – сверху вниз (это значение по умолчанию). Для значения rtl отображается зеркально.

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

Допустимые значения:

  • row - флекс элементы отображаются горизонтально, в виде строки. Главная ось при направлении ltr (глобальный HTML атрибут dir, либо CSS свойство direction со значением ltr) располагается слева направо, а при значения rtl отображается справо налево. Это значение по умолчанию.
  • row-reverse - флекс элементы отображаются горизонтально, в виде строки по аналогии со значением row, но формирование строки идёт в обратном направлении. Главная ось при направлении ltr (глобальный HTML атрибут dir, либо CSS свойство direction со значением ltr) располагается справо налево, а при значения rtl отображается слева направо.
  • column - флекс элементы отображаются вертикально как колонны. Формирование колонны осуществляется сверху вниз.
  • column-reverse - Флекс элементы отображаются вертикально как колонны по аналогии со значением column, но формирование колонны идёт в обратном направлении (снизу вверх).
flex-wrap

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

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

Допустимые значения:

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

Версия CSS

CSS3

Наследуется

Нет.

Анимируемое

Нет.

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

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

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

Пример использования свойства flex-flow(позволяет в одном объявлении указать значения свойств flex-direction и flex-wrap).
Пример использования свойства flex-flow(позволяет в одном объявлении указать значения свойств flex-direction и flex-wrap).
CSS свойства