Flex īpašība
Īpašība flex ir saīsinājums priekš flex-basis,
flex-shrink
un flex-grow.
Attiecas uz: konkrētu flex bloku.
Vērtību secībai nav nozīmes. Otrais un trešais
parametrs (flex-shrink, flex-basis)
nav obligāts.
Vērtības
Skatīties atbilstošās īpašības.
Noklusējuma vērtība: 0 1 auto.
Piemērs
Pieņemsim, ka mums ir 3 elementi. Katra no tiem platums
ir 200px un kopā tie ir 600px,
kas ir vairāk nekā vecāka konteinera platums, kurš
ir 300px. Piešķirsim pirmajam elementam platumu
200px, otrajam elementam - 300px,
trešajam elementam - 100px. Visiem elementiem
lai vērtība flex-basis ir 1,
un flex-shrink - 1, 2, 3 atbilstoši
elementa kārtas numuram:
<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;
}
:
Skatīt arī
-
īpašība
flex-direction,
kura nosaka flex bloku asu virzienu -
īpašība
justify-content,
kura nosaka izlīdzināšanu pa galveno asi -
īpašība
align-items,
kura nosaka izlīdzināšanu pa šķērsasi -
īpašība
flex-wrap,
kura nosaka flex bloku daudzrinduīpašību -
īpašība
flex-flow,
saīsinājums priekš flex-direction un flex-wrap -
īpašība
order,
kura nosaka flex bloku secību -
īpašība
align-self,
kura nosaka viena bloka izlīdzināšanu -
īpašība
flex-basis,
kura nosaka konkrēta flex bloka izmēru -
īpašība
flex-grow,
kura nosaka flex bloku "alkatību" -
īpašība
flex-shrink,
kura nosaka flex bloku saspiežamību