Omadus flex-direction

Omadus flex-direction määrab peatelje ja risttelje suuna või, teiste sõnadega, paigutab elemendid ritta või veergu.

Rakendatakse vanemelemendile flex-konteinerite jaoks. Kuulub lühendomadusse flex-flow.

Süntaks

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

Väärtus	Kirjeldus
`row`	Peatelg on suunatud vasakult paremale. Elemendid on paigutatud ritta, vaikimisi surutud vasakule servale, nende nummerdamine on tavapärane - vasakult paremale.
`row-reverse`	Peatelg on suunatud paremalt vasakule. Elemendid on paigutatud ritta, vaikimisi surutud paremale servale, nende nummerdamine on vastupidine - paremalt vasakule.
`column`	Peatelg on suunatud ülevalt alla. Elemendid on paigutatud veergu, vaikimisi surutud üleservale, nende nummerdamine on tavapärane - ülevalt alla.
`column-reverse`	Peatelg on suunatud alt üles. Elemendid on paigutatud veergu, vaikimisi surutud alaservale, nende nummerdamine on vastupidine - alt üles.

Vaikeväärtus: row.

Elemendid on paigutatud ritta, vaikimisi surutud vasakule servale, nende nummerdamine on tavapärane - vasakult paremale:

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

Elemendid on paigutatud ritta, vaikimisi surutud paremale servale, nende nummerdamine on vastupidine - paremalt vasakule:

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

Elemendid on paigutatud veergu, vaikimisi surutud üleservale, nende nummerdamine on tavapärane - ülevalt alla:

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

Elemendid on paigutatud veergu, vaikimisi surutud alaservale, nende nummerdamine on vastupidine - alt üles:

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