Grootte van flex element langs de hoofdas

De eigenschappen width en height bepalen de breedte en hoogte van een flex element onafhankelijk van de richting van de assen. Dat wil zeggen, als de as horizontaal is, dan zal width de breedte bepalen, maar als de as verticaal is, dan zal width nog steeds de breedte bepalen. Soms is dit gedrag niet handig.

In het flexmodel bestaat er een speciale eigenschap flex-basis, die de grootte van het element langs de hoofdas bepaalt. Dit betekent dat als de hoofdas horizontaal is - deze eigenschap de breedte van de elementen zal bepalen, en als deze verticaal is - dan de hoogte. Deze eigenschap moet worden ingesteld op de flex elementen zelf, en niet op hun ouder. Laten we kijken naar voorbeelden.

Stel dat de hoofdas nu horizontaal is, en flex-basis heeft de waarde 50px. In dit geval zal de breedte van de elementen 50px zijn:

<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; /* as is horizontaal */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px;   /* grootte van het element */
	border: 1px solid green;
}

Laten we nu de as omdraaien, zonder de waarde van de eigenschap flex-basis te veranderen. In dit geval zal de hoogte van de elementen 50px zijn:

<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; /* as is verticaal */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px;
	border: 1px solid green;
}

Maak 5 flexblokken. Stel hun breedte in langs de hoofdas op 100px. Observeer het gedrag van de blokken langs verschillende assen.

Als de as horizontaal is en aan het blok zijn zowel de eigenschap flex-basis als de eigenschap width toegekend, dan heeft flex-basis prioriteit. Controleer dit.

Als de as verticaal is en aan het blok zijn zowel de eigenschap flex-basis als de eigenschap height toegekend, dan heeft flex-basis prioriteit. Controleer dit.