Veľkosť flex elementu pozdĺž hlavnej osi

Vlastnosti width a height nastavujú šírku a výšku flex elementu nezávisle od smeru osí. To znamená, že ak je os horizontálna, tak width bude nastavovať šírku, ale ak je os vertikálna, tak width stále bude nastavovať šírku. Niekedy takéto správanie nie je pohodlné.

Vo flex modeli existuje špeciálna vlastnosť flex-basis, ktorá nastavuje veľkosť elementu pozdĺž hlavnej osi. To znamená, že ak je hlavná os horizontálna - táto vlastnosť bude nastavovať šírku elementov, a ak je vertikálna - tak výšku. Túto vlastnosť je potrebné nastaviť samotným flex elementom, a nie ich rodičovi. Pozrime sa na príkladoch.

Predpokladajme, že hlavná os je horizontálna, a flex-basis má hodnotu 50px. V tomto prípade bude šírka elementov 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; /* os horizontálna */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px;   /* veľkosť elementu */
	border: 1px solid green;
}

Teraz otočme os, bez zmeny hodnoty vlastnosti flex-basis. V tomto prípade už výška elementov bude 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; /* os vertikálna */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px;
	border: 1px solid green;
}

Vytvorte 5 flex blokov. Nastavte im šírku pozdĺž hlavnej osi na 100px. Pozrite si správanie blokov pozdĺž rôznych osí.

Ak je os horizontálna a bloku je nastavená vlastnosť flex-basis a súčasne vlastnosť width, tak flex-basis bude mať prioritu. Overte to.

Ak je os vertikálna a bloku je nastavená vlastnosť flex-basis a súčasne vlastnosť height, tak flex-basis bude mať prioritu. Overte to.