De eigenschap flex-basis

De eigenschap flex-basis bepaalt de grootte van een specifiek flexblok voordat de overige flex-eigenschappen erop worden toegepast. In het algemeen bepaalt de eigenschap de grootte van het element langs de hoofdas. Dit betekent dat als de hoofdas horizontaal is - deze eigenschap de breedte van de elementen bepaalt, en als deze verticaal is - dan de hoogte.

Wordt toegepast op een specifiek flexblok.

Deze eigenschap maakt deel uit van de verkorte eigenschap flex.

Syntaxis

selector {
	flex-basis: alle CSS-eenheden (en percentages) | auto;
}

Standaardwaarde: auto.

Voorbeeld

Stel dat de hoofdas horizontaal is gericht, en flex-basis de waarde 50px heeft. 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;
}

Voorbeeld

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

Zie ook

de eigenschap flex-direction,
die de richting van de assen van flexblokken bepaalt
de eigenschap justify-content,
die de uitlijning langs de hoofdas bepaalt
de eigenschap align-items,
die de uitlijning langs de kruisas bepaalt
de eigenschap flex-wrap,
die de meerdere regels van flexblokken bepaalt
de eigenschap flex-flow,
verkorting voor flex-direction en flex-wrap
de eigenschap order,
die de volgorde van flexblokken bepaalt
de eigenschap align-self,
die de uitlijning van één blok bepaalt
de eigenschap flex-grow,
die de "gulzigheid" van flexblokken bepaalt
de eigenschap flex-shrink,
die de inkrimping van flexblokken bepaalt
de eigenschap flex,
verkorting voor flex-grow, flex-shrink en flex-basis