Flex-elementin koko pääakselilla

Ominaisuudet width ja height määrittävät flex-elementin leveyden ja korkeuden riippumatta akselien suunnasta. Toisin sanoen, jos akseli on vaakasuora, width määrittää leveyden, mutta jos akseli on pystysuora, width silti määrittää leveyden. Joskus tällainen käyttäytyminen ei ole kätevää.

Flex-mallissa on erityinen ominaisuus flex-basis, joka määrittää elementin koon pääakselilla. Tämä tarkoittaa, että jos pääakseli on vaakasuora - tämä ominaisuus määrittää elementtien leveyden, ja jos se on pystysuora - niin korkeuden. Tämä ominaisuus on asetettava flex-elementeille itselleen, eikä niiden vanhemmalle. Katsotaanpa esimerkein.

Oletetaan, että pääakseli on nyt vaakasuora, ja flex-basis on arvo 50px. Tässä tapauksessa elementtien leveys on 50px:

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
</div>

.parent {
	display: flex;
	flex-direction: row; /* akseli vaakasuora */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px;   /* elementin koko */
	border: 1px solid green;
}

Käännämme nyt akselin muuttamatta flex-basis-ominaisuuden arvoa. Tässä tapauksessa elementtien korkeus on 50px:

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
</div>

.parent {
	display: flex;
	flex-direction: column; /* akseli pystysuora */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px;
	border: 1px solid green;
}

Tee 5 flex-elementtiä. Aseta niille leveys pääakselilla 100px. Tarkastele elementtien käyttäytymistä erisuuntaisilla akselilla.

Jos akseli on vaakasuora ja elementille on asetettu flex-basis-ominaisuus ja samanaikaisesti width-ominaisuus, niin flex-basis on etusijalla. Tarkista tämä.

Jos akseli on pystysuora ja elementille on asetettu flex-basis-ominaisuus ja samanaikaisesti height-ominaisuus, niin flex-basis on etusijalla. Tarkista tämä.