Størrelse af flex-element langs hovedaksen

Egenskaberne width og height angiver bredden og højden af flex-elementet uafhængigt af aksernes retning. Det vil sige, hvis aksen er vandret, vil width angive bredden, men hvis aksen er lodret, vil width stadig angive bredden. Undertiden er sådan opførsel ikke praktisk.

I flex-modellen findes der en speciel egenskab flex-basis, som angiver størrelsen af elementet langs hovedaksen. Det betyder, at hvis hovedaksen er vandret - vil denne egenskab angive bredden af elementerne, og hvis den er lodret - så højden. Denne egenskab skal angives på de flex-elementer selv, og ikke på deres forælder. Lad os se på eksempler.

Lad os sige at hovedaksen er vandret, og flex-basis har værdien 50px. I dette tilfælde vil bredden af elementerne være 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; /* aksen er vandret */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px;   /* elementets størrelse */
	border: 1px solid green;
}

Lad os nu vende aksen, uden at ændre værdien af egenskaben flex-basis. I dette tilfælde vil højden af elementerne være 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; /* aksen er lodret */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px;
	border: 1px solid green;
}

Lav 5 flex-blokke. Angiv deres bredde langs hovedaksen til 100px. Obserér blokkenes opførsel langs forskellige akser.

Hvis aksen er vandret og blokken har egenskaben flex-basis og samtidig egenskaben width, så vil flex-basis have prioritet. Kontroller dette.

Hvis aksen er lodret og blokken har egenskaben flex-basis og samtidig egenskaben height, så vil flex-basis have prioritet. Kontroller dette.