Ominaisuus flex-direction

Ominaisuus flex-direction asettaa pääakselin ja poikkisuuntaisen akselin suunnan tai, toisin sanoen, asettaa elementit riviin tai sarakkeeseen.

Sovelletaan vanhempielementtiin flex-lohkoille. Kuuluu lyhennettyyn ominaisuuteen flex-flow.

Syntaksi

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

Arvot

Arvo	Kuvaus
`row`	Pääakselin suunta on vasemmalta oikealle. Elementit sijoitetaan riviin, oletusarvoisesti vasempaan reunaan kiinnitettyinä, niiden numerointi on tavallisessa järjestyksessä - vasemmalta oikealle.
`row-reverse`	Pääakselin suunta on oikealta vasemmalle. Elementit sijoitetaan riviin, oletusarvoisesti oikeaan reunaan kiinnitettyinä, niiden numerointi on käänteisessä järjestyksessä - oikealta vasemmalle.
`column`	Pääakselin suunta on ylhäältä alas. Elementit sijoitetaan sarakkeeseen, oletusarvoisesti yläreunaan kiinnitettyinä, niiden numerointi on tavallisessa järjestyksessä - ylhäältä alas.
`column-reverse`	Pääakselin suunta on alhaalta ylös. Elementit sijoitetaan sarakkeeseen, oletusarvoisesti alareunaan kiinnitettyinä, niiden numerointi on käänteisessä järjestyksessä - alhaalta ylös.

Oletusarvo: row.

Esimerkki

Elementit sijoitetaan riviin, oletusarvoisesti vasempaan reunaan kiinnitettyinä, niiden numerointi on tavallisessa järjestyksessä - vasemmalta oikealle:

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

Esimerkki . Arvo row-reverse

Elementit sijoitetaan riviin, oletusarvoisesti oikeaan reunaan kiinnitettyinä, niiden numerointi on käänteisessä järjestyksessä - oikealta vasemmalle:

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

Esimerkki . Arvo column

Elementit sijoitetaan sarakkeeseen, oletusarvoisesti yläreunaan kiinnitettyinä, niiden numerointi on tavallisessa järjestyksessä - ylhäältä alas:

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

Esimerkki . Arvo column-reverse

Elementit sijoitetaan sarakkeeseen, oletusarvoisesti alareunaan kiinnitettyinä, niiden numerointi on käänteisessä järjestyksessä - alhaalta ylös:

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

Katso myös

ominaisuus justify-content,
joka asettaa tasauksen pääakselilla
ominaisuus align-items,
joka asettaa tasauksen poikkisuuntaisella akselilla
ominaisuus flex-wrap,
joka asettaa flex-lohkojen monirivisyyden
ominaisuus flex-flow,
lyhenne flex-directionille ja flex-wraplle
ominaisuus order,
joka asettaa flex-lohkojen järjestyksen
ominaisuus align-self,
joka asettaa yhden lohkon tasauksen
ominaisuus flex-basis,
joka asettaa tietyn flex-lohkon koon
ominaisuus flex-grow,
joka asettaa flex-lohkojen "ahneuden"
ominaisuus flex-shrink,
joka asettaa flex-lohkojen kutistuvuuden
ominaisuus flex,
lyhenne flex-growlle, flex-shrinkille ja flex-basikselle