A flex-direction tulajdonság

A flex-direction tulajdonság beállítja a fő- és keresztirányú tengelyek irányát, vagy más szóval sorba vagy oszlopba rendezi az elemeket.

A flex konténer szülő elemre vonatkozik. Része a flex-flow összetett tulajdonságnak.

Szintaxis

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

Érték	Leírás
`row`	A főtengely balról jobbra irányul. Az elemek sorba rendeződnek, alapértelmezetten a bal széléhez igazítva, számozásuk a szokásos rendet követi - balról jobbra.
`row-reverse`	A főtengely jobbról balra irányul. Az elemek sorba rendeződnek, alapértelmezetten a jobb széléhez igazítva, számozásuk fordított rendet követi - jobbról balra.
`column`	A főtengely felülről lefelé irányul. Az elemek oszlopba rendeződnek, alapértelmezetten a felső széléhez igazítva, számozásuk a szokásos rendet követi - felülről lefelé.
`column-reverse`	A főtengely alulról felfelé irányul. Az elemek oszlopba rendeződnek, alapértelmezetten az alsó széléhez igazítva, számozásuk fordított rendet követi - alulról felfelé.

Alapértelmezett érték: row.

Az elemek sorba rendeződnek, alapértelmezetten a bal széléhez igazítva, számozásuk a szokásos rendet követi - balról jobbra:

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

Az elemek sorba rendeződnek, alapértelmezetten a jobb széléhez igazítva, számozásuk fordított rendet követi - jobbról balra:

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

Az elemek oszlopba rendeződnek, alapértelmezetten a felső széléhez igazítva, számozásuk a szokásos rendet követi - felülről lefelé:

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

Az elemek oszlopba rendeződnek, alapértelmezetten az alsó széléhez igazítva, számozásuk fordított rendet követi - alulról felfelé:

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

a justify-content tulajdonság,
amely a főtengely mentén igazít
a align-items tulajdonság,
amely a keresztirányú tengely mentén igazít
a flex-wrap tulajdonság,
amely a flex elemek többsoros elrendezését határozza meg
a flex-flow tulajdonság,
összetett tulajdonság a flex-direction és flex-wrap számára
a order tulajdonság,
amely a flex elemek sorrendjét határozza meg
a align-self tulajdonság,
amely egy elem igazítását határozza meg
a flex-basis tulajdonság,
amely egy adott flex elem méretét határozza meg
a flex-grow tulajdonság,
amely a flex elemek "növekedési tényezőjét" határozza meg
a flex-shrink tulajdonság,
amely a flex elemek zsugorodását határozza meg
a flex tulajdonság,
összetett tulajdonság a flex-grow, flex-shrink és flex-basis számára