Lastnost flex
Lastnost flex je okrajšava za flex-basis,
flex-shrink
in flex-grow.
Velja za: posamezen flex element.
Vrstni red vrednosti ni pomemben. Drugi in tretji
parameter (flex-shrink, flex-basis)
sta neobvezna.
Vrednosti
Glej ustrezne lastnosti.
Privzeta vrednost: 0 1 auto.
Primer
Imejmo 3 elemente. Širina vsakega od njih
je 200px in skupaj znaša 600px,
kar je več kot širina starševskega vsebnika, ki
znaša 300px. Prvemu elementu določimo širino
200px, drugemu elementu - 300px,
tretjemu elementu - 100px. Vsem elementom
naj bo vrednost flex-basis enaka 1,
flex-shrink pa - 1, 2, 3 glede na
zaporedno številko elementa:
<div class="parent">
<div class="child elem1">1</div>
<div class="child elem2">2</div>
<div class="child elem2">3</div>
</div>
.parent {
display: flex;
width: 350px;
height: 200px;
border: 1px solid red;
}
.child {
width: 200px;
height: 50px;
border: 1px solid green;
}
.elem1 {
flex: 200px 1 1;
}
.elem2 {
flex: 300px 1 2;
}
.elem3 {
flex: 100px 1 3;
}
:
Glej tudi
-
lastnost
flex-direction,
ki določa smer osi flex elementov -
lastnost
justify-content,
ki določa poravnavo vzdolž glavne osi -
lastnost
align-items,
ki določa poravnavo vzdolž prečne osi -
lastnost
flex-wrap,
ki določa večvrstičnost flex elementov -
lastnost
flex-flow,
okrajšava za flex-direction in flex-wrap -
lastnost
order,
ki določa vrstni red flex elementov -
lastnost
align-self,
ki določa poravnavo posameznega elementa -
lastnost
flex-basis,
ki določa velikost posameznega flex elementa -
lastnost
flex-grow,
ki določa "požrešnost" flex elementov -
lastnost
flex-shrink,
ki določa stisljivost flex elementov