Vlastnosť flex-direction

Vlastnosť flex-direction nastavuje smer hlavnej a priečnej osi alebo, inými slovami, usporadúva prvky do radu alebo do stĺpca.

Aplikuje sa na nadradený prvok flex kontajnerov. Je súčasťou skrátenej vlastnosti flex-flow.

Syntax

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

Hodnota	Popis
`row`	Hlavná os smeruje zľava doprava. Prvky sú usporiadané do radu, štandardne pritlačené k ľavému okraju, ich číslovanie má obvyklé poradie - zľava doprava.
`row-reverse`	Hlavná os smeruje sprava doľava. Prvky sú usporiadané do radu, štandardne pritlačené k pravému okraju, ich číslovanie má opačné poradie - sprava doľava.
`column`	Hlavná os smeruje zhora nadol. Prvky sú usporiadané do stĺpca, štandardne pritlačené k hornej časti, ich číslovanie má obvyklé poradie - zhora nadol.
`column-reverse`	Hlavná os smeruje zdola nahor. Prvky sú usporiadané do stĺpca, štandardne pritlačené k dolnej časti, ich číslovanie má opačné poradie - zdola nahor.

Štandardná hodnota: row.

Prvky sú usporiadané do radu, štandardne pritlačené k ľavému okraju, ich číslovanie má obvyklé poradie - zľava 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 sú usporiadané do radu, štandardne pritlačené k pravému okraju, ich číslovanie má opačné poradie - sprava doľava:

<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 sú usporiadané do stĺpca, štandardne pritlačené k hornej časti, ich číslovanie má obvyklé poradie - zhora nadol:

<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 sú usporiadané do stĺpca, štandardne pritlačené k dolnej časti, ich číslovanie má opačné poradie - zdola nahor:

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