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.