Størrelse på flex-element langs hovedaksen

Egenskapene width og height setter bredden og høyden på flex-elementet uavhengig av aksenes retning. Det vil si, hvis aksen er horisontal, vil width sette bredden, men hvis aksen er vertikal, vil width fortsatt sette bredden. Noen ganger er ikke denne oppførselen praktisk.

I flex-modellen finnes det en spesiell egenskap flex-basis, som setter størrelsen på elementet langs hovedaksen. Dette betyr at hvis hovedaksen er horisontal - vil denne egenskapen sette bredden på elementene, og hvis den er vertikal - vil den sette høyden. Denne egenskapen må settes på flex-elementene selv, og ikke på deres forelder. La oss se på eksempler.

La oss si at hovedaksen er horisontal, og flex-basis har verdien 50px. I dette tilfellet vil bredden på elementene 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 horisontal */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px;   /* elementets størrelse */
	border: 1px solid green;
}

La oss nå snu aksen, uten å endre verdien på egenskapen flex-basis. I dette tilfellet vil høyden på elementene 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 vertikal */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px;
	border: 1px solid green;
}

Lag 5 flex-bokser. Sett bredden deres langs hovedaksen til 100px. Se på oppførselen til boksene langs forskjellige akser.

Hvis aksen er horisontal og boksen har egenskapen flex-basis og samtidig egenskapen width, vil flex-basis ha prioritet. Sjekk dette.

Hvis aksen er vertikal og boksen har egenskapen flex-basis og samtidig egenskapen height, vil flex-basis ha prioritet. Sjekk dette.