Egenskaben flex-direction

Egenskaben flex-direction indstiller retningen af hoved- og tværaksen eller, med andre ord, placerer elementer i en række eller kolonne.

Anvendes på forældreelementet for flex containere. Indgår i sammentrukket egenskab flex-flow.

Syntaks

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

Værdier

Værdi	Beskrivelse
`row`	Hovedaksen er rettet fra venstre mod højre. Elementer er placeret i en række, som standard trykket op mod venstre kant, deres nummerering har den sædvanlige rækkefølge - fra venstre mod højre.
`row-reverse`	Hovedaksen er rettet fra højre mod venstre. Elementer er placeret i en række, som standard trykket op mod højre kant, deres nummerering har omvendt rækkefølge - fra højre mod venstre.
`column`	Hovedaksen er rettet ovenfra og nedad. Elementer er placeret i en kolonne, som standard trykket op mod toppen, deres nummerering har den sædvanlige rækkefølge - ovenfra og nedad.
`column-reverse`	Hovedaksen er rettet nedenfra og opad. Elementer er placeret i en kolonne, som standard trykket op mod bunden, deres nummerering har omvendt rækkefølge - nedenfra og opad.

Standardværdi: row.

Eksempel

Elementer er placeret i en række, som standard trykket op mod venstre kant, deres nummerering har den sædvanlige rækkefølge - fra venstre mod højre:

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

Eksempel . Værdien row-reverse

Elementer er placeret i en række, som standard trykket op mod højre kant, deres nummerering har omvendt rækkefølge - fra højre mod venstre:

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

Eksempel . Værdien column

Elementer er placeret i en kolonne, som standard trykket op mod toppen, deres nummerering har den sædvanlige rækkefølge - ovenfra og nedad:

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

Eksempel . Værdien column-reverse

Elementer er placeret i en kolonne, som standard trykket op mod bunden, deres nummerering har omvendt rækkefølge - nedenfra og opad:

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

Se også

egenskaben justify-content,
som angiver justering langs hovedaksen
egenskaben align-items,
som angiver justering langs tværaksen
egenskaben flex-wrap,
som angiver multiline tilstand for flex containere
egenskaben flex-flow,
sammentrukket egenskab for flex-direction og flex-wrap
egenskaben order,
som angiver rækkefølgen af flex elementer
egenskaben align-self,
som angiver justering af et enkelt element
egenskaben flex-basis,
som angiver størrelsen på et specifikt flex element
egenskaben flex-grow,
som angiver om flex elementer må vokse
egenskaben flex-shrink,
som angiver om flex elementer må krympe
egenskaben flex,
sammentrukket egenskab for flex-grow, flex-shrink og flex-basis