Eienskap flex-direction

Die eienskap flex-direction stel die rigting van die hoof- en dwars-as vas of, met ander woorde, plaas elemente in 'n ry of in 'n kolom.

Word toegepas op die ouerelement vir flex blokke. Maak deel uit van die verkorte eienskap flex-flow.

Sintaksis

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

Waarde	Beskrywing
`row`	Die hoofas is van links na regs gerig. Elemente is in 'n ry geplaas, by verstek teen die linkerkant vas, hul nommering het die gewone volgorde - van links na regs.
`row-reverse`	Die hoofas is van regs na links gerig. Elemente is in 'n ry geplaas, by verstek teen die regterkant vas, hul nommering het die omgekeerde volgorde - van regs na links.
`column`	Die hoofas is van bo na onder gerig. Elemente is in 'n kolom geplaas, by verstek teen die bokant vas, hul nommering het die gewone volgorde - van bo na onder.
`column-reverse`	Die hoofas is van onder na bo gerig. Elemente is in 'n kolom geplaas, by verstek teen die onderkant vas, hul nommering het die omgekeerde volgorde - van onder na bo.

Verstekwaarde: row.

Elemente is in 'n ry geplaas, by verstek teen die linkerkant vas, hul nommering het die gewone volgorde - van links na regs:

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

Elemente is in 'n ry geplaas, by verstek teen die regterkant vas, hul nommering het die omgekeerde volgorde - van regs na links:

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

Elemente is in 'n kolom geplaas, by verstek teen die bokant vas, hul nommering het die gewone volgorde - van bo na onder:

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

Elemente is in 'n kolom geplaas, by verstek teen die onderkant vas, hul nommering het die omgekeerde volgorde - van onder na bo:

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

die eienskap justify-content,
wat belyning langs die hoofas spesifiseer
die eienskap align-items,
wat belyning langs die dwars-as spesifiseer
die eienskap flex-wrap,
wat veelvuldigheid van flex blokke spesifiseer
die eienskap flex-flow,
verkorting vir flex-direction en flex-wrap
die eienskap order,
wat die volgorde van flex blokke spesifiseer
die eienskap align-self,
wat belyning van 'n enkele blok spesifiseer
die eienskap flex-basis,
wat die grootte van 'n spesifieke flex blok spesifiseer
die eienskap flex-grow,
wat die gierigheid van flex blokke spesifiseer
die eienskap flex-shrink,
wat die krimpbaarheid van flex blokke spesifiseer
die eienskap flex,
verkorting vir flex-grow, flex-shrink en flex-basis