Свойство flex-direction

Свойството flex-direction задава посоката на главната и напречната ос или, с други думи, подрежда елементите в ред или колона.

Прилага се към родителския елемент за flex блокове. Влиза в свойството-съкращение flex-flow.

Синтаксис

селектор {
	flex-direction: row | row-reverse | column | column-reverse;
}

Стойност	Описание
`row`	Главната ос е насочена отляво надясно. Елементите са подредени в ред, по подразбиране са притиснати към левия край, номерацията им има обикновен ред - отляво надясно.
`row-reverse`	Главната ос е насочена отдясно наляво. Елементите са подредени в ред, по подразбиране са притиснати към десния край, номерацията им има обратен ред - отдясно наляво.
`column`	Главната ос е насочена отгоре надолу. Елементите са подредени в колона, по подразбиране са притиснати към върха, номерацията им има обикновен ред - отгоре надолу.
`column-reverse`	Главната ос е насочена отдолу нагоре. Елементите са подредени в колона, по подразбиране са притиснати към дъното, номерацията им има обратен ред - отдолу нагоре.

Стойност по подразбиране: row.

Елементите са подредени в ред, по подразбиране притиснати към левия край, номерацията им има обикновен ред - отляво надясно:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	flex-direction: row;
	display: flex;
}
#parent > div {
	border: 1px solid #696989;
	width: 100px;
	height: 50px;
}

Елементите са подредени в ред, по подразбиране притиснати към десния край, номерацията им има обратен ред - отдясно наляво:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	flex-direction: row-reverse;
	display: flex;
}
#parent > div {
	border: 1px solid #696989;
	width: 100px;
	height: 50px;
}

Елементите са подредени в колона, по подразбиране притиснати към върха, номерацията им има обикновен ред - отгоре надолу:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	flex-direction: column;
	display: flex;
}
#parent > div {
	border: 1px solid #696989;
	width: 100px;
	height: 50px;
}

Елементите са подредени в колона, по подразбиране притиснати към дъното, номерацията им има обратен ред - отдолу нагоре:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	flex-direction: column-reverse;
	display: flex;
}
#parent > div {
	border: 1px solid #696989;
	width: 100px;
	height: 50px;
}