CSS :: Свойство flex-direction

css-свойство flex-direction (от англ. flex direction – направление флекс-контейнера) задает направление главной оси флекс-контейнера, определяя порядок расположения флекс-элементов в нем. При этом следует иметь в виду, что направление главной оси зависит также и от значения атрибута dir у флекс-контейнера.

Характеристики

Значение по умолчанию: row.
Применяется: к флекс-контейнеру.
Наследуется: нет.
Анимируется: нет.
JavaScript: object.style.flexDirection="value".

Синтаксис

flex-direction: row | row-reverse | column | column-reverse

Значения

row – главная ось направлена горизонтально в направлении записи текста (используется по умолчанию). Следует помнить, что направление записи текста в элементе задается универсальным атрибутом dir и по умолчанию имеет значение ltr (т.е. слева направо), именно поэтому флекс-элементы по умолчанию также отображаются строкой слева направо в направлении от стороны main start к main end.
row-reverse – главная ось также направлена горизонтально, но при этом стороны main start и main end флекс-контейнера располагаются в направлении противоположном направлению записи текста в контейнере, поэтому флекс-элементы отображаются в строку, но в обратном порядке.
column – главная ось направлена вертикально сверху вниз, поэтому флекс-элементы отображаются колонкой сверху вниз в направлении от стороны main start к main end.
column-reverse – главная ось направлена вертикально снизу вверх, поэтому флекс-элементы отображаются колонкой снизу вверх в направлении от стороны main start к main end.

Ссылки

Официальный сайт W3C: https://drafts.csswg.org/css-flexbox-1/#propdef-flex-direction

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/flex-direction

Подробнее о модуле Flexbox смотрите в нашем учебнике здесь.

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>

	<style>
		/* Оформляем родительские div'ы flex-элементов */
		div{
		display: flex;
		width: 250px;
		height: 150px;
		margin: auto;
		margin-top: 10px;
		background-color: #DFDFDF;
		border-radius: 5px;
		}
		
		/* Это общий стиль flex-элементов */		
		p, span{
		width: 40px;
		padding: 10px;
		margin: auto;
		background-color: #55aa55;
		border-radius: 5px;
		text-align: center;
		font-weight: bold;
		color: #F9F9F9;
		}

		/* Это класс для 1-го div'а */	
		.div_flex_1{
		flex-direction: row;
		}
		
		/* Это класс для 2-го div'а */	
		.div_flex_2{
		flex-direction: row-reverse;
		}
		
		/* Это класс для 3-го div'а */	
		.div_flex_3{
		flex-direction: column;
		}
		
		/* Это класс для 4-го div'а */	
		.div_flex_4{
		flex-direction: column-reverse;
		}		
		
	</style>
		
</head>
<body>

	<div class="div_flex_1">
		<p>1</p><span>2</span><p>3</p>
	</div>

	<div class="div_flex_2">
		<p>1</p><span>2</span><p>3</p>
	</div>	
	
	<div class="div_flex_3">
		<p>1</p><span>2</span><p>3</p>
	</div>

	<div class="div_flex_4">
		<p>1</p><span>2</span><p>3</p>
	</div>

</body>
</html>

Пример №1