Својство 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;
}