Vlastnosť flex
Vlastnosť flex je skratka pre flex-basis,
flex-shrink
a flex-grow.
Vzťahuje sa na: konkrétny flex box.
Poradie hodnôt nie je dôležité. Druhý a tretí
parameter (flex-shrink, flex-basis)
nie sú povinné.
Hodnoty
Pozri príslušné vlastnosti.
Predvolená hodnota: 0 1 auto.
Príklad
Majme 3 elementy. Šírka každého z nich
je 200px a celkovo je to 600px,
čo je viac ako šírka nadradeného kontajnera, ktorá
je 300px. Priradíme pre prvý element šírku
200px, pre druhý element - 300px, pre
tretí element - 100px. Všetky elementy
majú hodnotu flex-basis rovnú 1,
a flex-shrink - 1, 2, 3 podľa
poradového čísla elementu:
<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;
}
:
Pozri tiež
-
vlastnosť
flex-direction,
ktorá nastavuje smer osí flex boxov -
vlastnosť
justify-content,
ktorá nastavuje zarovnanie pozdĺž hlavnej osi -
vlastnosť
align-items,
ktorá nastavuje zarovnanie pozdĺž priečnej osi -
vlastnosť
flex-wrap,
ktorá nastavuje viacriadkovosť flex boxov -
vlastnosť
flex-flow,
skratka pre flex-direction a flex-wrap -
vlastnosť
order,
ktorá nastavuje poradie flex boxov -
vlastnosť
align-self,
ktorá nastavuje zarovnanie jedného boxu -
vlastnosť
flex-basis,
ktorá nastavuje veľkosť konkrétneho flex boxu -
vlastnosť
flex-grow,
ktorá nastavuje "lakomosť" flex boxov -
vlastnosť
flex-shrink,
ktorá nastavuje stlačiteľnosť flex boxov