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

CSS свойства

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

CSS свойство flex-directioncss3 позволяет указать направление, в соответствии с которым располагаются флекс элементы внутри флекс контейнера.

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


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


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

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

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

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

CSS синтаксис:

flex-direction:"row | row-reverse | column | column-reverse | initial | inherit";

JavaScript синтаксис:

object.style.flexDirection = "column"

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

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

Версия CSS

CSS3

Наследуется

Нет.

Анимируемое

Нет.

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

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