Vlastnost flex-direction

Vlastnost flex-direction nastavuje směr hlavní a příčné osy nebo, jinými slovy, uspořádává prvky do řádku nebo sloupce.

Aplikuje se na nadřazený prvek flex kontejnerů. Je součástí zkratkové vlastnosti flex-flow.

Syntaxe

selektor {
	flex-direction: row | row-reverse | column | column-reverse;
}

Hodnota	Popis
`row`	Hlavní osa směřuje zleva doprava. Prvky jsou uspořádány v řádku, ve výchozím nastavení přitlačeny k levému okraji, jejich číslování má obvyklé pořadí - zleva doprava.
`row-reverse`	Hlavní osa směřuje zprava doleva. Prvky jsou uspořádány v řádku, ve výchozím nastavení přitlačeny k pravému okraji, jejich číslování má obrácené pořadí - zprava doleva.
`column`	Hlavní osa směřuje shora dolů. Prvky jsou uspořádány ve sloupci, ve výchozím nastavení přitlačeny k hornímu okraji, jejich číslování má obvyklé pořadí - shora dolů.
`column-reverse`	Hlavní osa směřuje zdola nahoru. Prvky jsou uspořádány ve sloupci, ve výchozím nastavení přitlačeny k dolnímu okraji, jejich číslování má obrácené pořadí - zdola nahoru.

Výchozí hodnota: row.

Prvky jsou uspořádány v řádku, ve výchozím nastavení přitlačeny k levému okraji, jejich číslování má obvyklé pořadí - zleva doprava:

<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;
}

Prvky jsou uspořádány v řádku, ve výchozím nastavení přitlačeny k pravému okraji, jejich číslování má obrácené pořadí - zprava doleva:

<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;
}

Prvky jsou uspořádány ve sloupci, ve výchozím nastavení přitlačeny k hornímu okraji, jejich číslování má obvyklé pořadí - shora dolů:

<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;
}

Prvky jsou uspořádány ve sloupci, ve výchozím nastavení přitlačeny k dolnímu okraji, jejich číslování má obrácené pořadí - zdola nahoru:

<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;
}