Flex savybė
flex savybė yra santrumpa flex-basis,
flex-shrink
ir flex-grow savybėms.
Taikoma: konkrečiam flex elementui.
Reikšmių tvarka neturi reikšmės. Antrasis ir trečiasis
parametrai (flex-shrink, flex-basis)
nėra privalomi.
Reikšmės
Žiūrėkite atitinkamas savybes.
Numatytoji reikšmė: 0 1 auto.
Pavyzdys
Tarkime, kad turime 3 elementus. Kiekvieno iš jų plotis
yra 200px ir bendrai sudaro 600px,
kas yra daugiau nei tėvinio konteinerio plotis, kuris
yra 300px. Pirmajam elementui nustatykime plotį
200px, antrajam elementui - 300px, o
trečiajam elementui - 100px. Visiems elementams
flex-basis reikšmė tebūnie 1,
o flex-shrink - 1, 2, 3 pagal
elemento eilės numerį:
<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;
}
:
Taip pat žiūrėkite
-
savybė
flex-direction,
kuri nustato flex elementų ašių kryptį -
savybė
justify-content,
kuri nustato lygiavimą pagal pagrindinę ašį -
savybė
align-items,
kuri nustato lygiavimą pagal skersinę ašį -
savybė
flex-wrap,
kuri nustato flex elementų daugiaeiliškumą -
savybė
flex-flow,
santrumpa flex-direction ir flex-wrap savybėms -
savybė
order,
kuri nustato flex elementų eiliškumą -
savybė
align-self,
kuri nustato vieno elemento lygiavimą -
savybė
flex-basis,
kuri nustato konkretaus flex elemento dydį -
savybė
flex-grow,
kuri nustato flex elementų "gobšumą" -
savybė
flex-shrink,
kuri nustato flex elementų susispaudimo laipsnį
