Svojstvo flex-direction

Svojstvo flex-direction postavlja pravac glavne i poprečne ose ili, drugim rečima, raspoređuje elemente u red ili kolonu.

Primenjuje se na roditeljski element za flex blokove. Deo je skraćenog svojstva flex-flow.

Sintaksa

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

Vrednost	Opis
`row`	Glavna osa je usmerena s leva na desno. Elementi su raspoređeni u red, po podrazumevanom su priljubljeni uz levi ivicu, njihovo numerisanje ima uobičajeni redosled - s leva na desno.
`row-reverse`	Glavna osa je usmerena s desna na levo. Elementi su raspoređeni u red, po podrazumevanom su priljubljeni uz desni ivicu, njihovo numerisanje ima obrnuti redosled - s desna na levo.
`column`	Glavna osa je usmerena odozgo nadole. Elementi su raspoređeni u kolonu, po podrazumevanom su priljubljeni uz gornju ivicu, njihovo numerisanje ima uobičajeni redosled - odozgo nadole.
`column-reverse`	Glavna osa je usmerena odozdo nagore. Elementi su raspoređeni u kolonu, po podrazumevanom su priljubljeni uz donju ivicu, njihovo numerisanje ima obrnuti redosled - odozdo nagore.

Podrazumevana vrednost: row.

Elementi su raspoređeni u red, po podrazumevanom priljubljeni uz levi ivicu, njihovo numerisanje ima uobičajeni redosled - s leva na desno:

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

Elementi su raspoređeni u red, po podrazumevanom priljubljeni uz desni ivicu, njihovo numerisanje ima obrnuti redosled - s desna na levo:

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

Elementi su raspoređeni u kolonu, po podrazumevanom priljubljeni uz gornju ivicu, njihovo numerisanje ima uobičajeni redosled - odozgo nadole:

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

Elementi su raspoređeni u kolonu, po podrazumevanom priljubljeni uz donju ivicu, njihovo numerisanje ima obrnuti redosled - odozdo nagore:

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