Velikost fleks elementa vzdolž glavne osi

Lastnosti width in height določata širino in višino fleks elementa neodvisno od smeri osi. To pomeni, da če je os vodoravna, bo width določal širino, toda če je os navpična, bo width še vedno določal širino. Včasih takšno vedenje ni priročno.

V fleks modelu obstaja posebna lastnost flex-basis, ki določa velikost elementa vzdolž glavne osi. To pomeni, da če je glavna os vodoravna - ta lastnost bo določala širino elementov, če pa je navpična - pa višino. To lastnost je treba nastaviti samim fleks elementom, ne njihovemu staršu. Poglejmo si primere.

Recimo, da je glavna os zdaj vodoravna, in ima flex-basis vrednost 50px. V tem primeru bo širina 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 je vodoravna */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px;   /* velikost elementa */
	border: 1px solid green;
}

Zdaj pa obrnimo os, ne da bi spremenili vrednost lastnosti flex-basis. V tem primeru bo višina 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: column; /* os je navpična */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px;
	border: 1px solid green;
}

Naredite 5 fleks-blokov. Nastavite jim širino vzdolž glavne osi na 100px. Opazujte vedenje blokov vzdolž različnih osi.

Če je os vodoravna in je bloku nastavljena lastnost flex-basis in hkrati lastnost width, bo imela flex-basis prednost. Preverite to.

Če je os navpična in je bloku nastavljena lastnost flex-basis in hkrati lastnost height, bo imela flex-basis prednost. Preverite to.