Īpašība flex-direction

Īpašība flex-direction nosaka galvenās un šķērsass virzienu vai, citiem vārdiem sakot, izvieto elementus rindā vai kolonnā.

Attiecas uz vecākelementu flex blokiem. Ietilpst īpašībā-saīsinājumā flex-flow.

Sintakse

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

Vērtība	Apraksts
`row`	Galvenā ass ir vērsta no kreisās puses uz labo. Elementi ir izvietoti rindā, pēc noklusējuma piespiesti pie kreisās malas, to numerācijai ir parasts secība - no kreisās uz labo pusi.
`row-reverse`	Galvenā ass ir vērsta no labās puses uz kreiso. Elementi ir izvietoti rindā, pēc noklusējuma piespiesti pie labās malas, to numerācijai ir apgriezta secība - no labās uz kreiso pusi.
`column`	Galvenā ass ir vērsta no augšas uz leju. Elementi ir izvietoti kolonnā, pēc noklusējuma piespiesti pie augšas, to numerācijai ir parasts secība - no augšas uz leju.
`column-reverse`	Galvenā ass ir vērsta no apakšas uz augšu. Elementi ir izvietoti kolonnā, pēc noklusējuma piespiesti pie apakšas, to numerācijai ir apgriezta secība - no apakšas uz augšu.

Noklusējuma vērtība: row.

Elementi ir izvietoti rindā, pēc noklusējuma piespiesti pie kreisās malas, to numerācijai ir parasta secība - no kreisās uz labo pusi:

<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 ir izvietoti rindā, pēc noklusējuma piespiesti pie labās malas, to numerācijai ir apgriezta secība - no labās uz kreiso pusi:

<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 ir izvietoti kolonnā, pēc noklusējuma piespiesti pie augšas, to numerācijai ir parasta secība - no augšas uz leju:

<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 ir izvietoti kolonnā, pēc noklusējuma piespiesti pie apakšas, to numerācijai ir apgriezta secība - no apakšas uz augšu:

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