Svojstvo flex
Svojstvo flex je skraćenica za flex-basis,
flex-shrink
i flex-grow.
Primenjuje se na: konkretni flex element.
Redosled vrednosti nije bitan. Drugi i treći
parametar (flex-shrink, flex-basis)
nije obavezan.
Vrednosti
Vidi odgovarajuća svojstva.
Podrazumevana vrednost: 0 1 auto.
Primer
Neka imamo 3 elementa. Širina svakog od njih
iznosi 200px i ukupno je 600px,
što je više od širine roditeljskog kontejnera, koja
iznosi 300px. Dodelimo za prvi element širinu
200px, za drugi element - 300px, za
treći element - 100px. Kod svih elemenata
neka vrednost flex-basis bude 1,
a flex-shrink - 1, 2, 3 u skladu
sa rednim brojem 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;
}
:
Vidite takođe
-
svojstvo
flex-direction,
koje postavlja pravac osa flex elementa -
svojstvo
justify-content,
koje postavlja poravnanje duž glavne ose -
svojstvo
align-items,
koje postavlja poravnanje duž poprečne ose -
svojstvo
flex-wrap,
koje postavlja višelinijskost flex elementa -
svojstvo
flex-flow,
skraćenica za flex-direction i flex-wrap -
svojstvo
order,
koje postavlja redosled flex elementa -
svojstvo
align-self,
koje postavlja poravnanje jednog elementa -
svojstvo
flex-basis,
koje postavlja veličinu konkretnog flex elementa -
svojstvo
flex-grow,
koje postavlja "pohlepu" flex elementa -
svojstvo
flex-shrink,
koje postavlja skupljivost flex elementa