Flex-omadus
Omadus flex on lühend omadustele flex-basis,
flex-shrink
ja flex-grow.
Kehtib: konkreetsele flex-elemendile.
Väärtuste järjekord ei ole oluline. Teine ja kolmas
parameeter (flex-shrink, flex-basis)
ei ole kohustuslikud.
Väärtused
Vaata vastavaid omadusi.
Vaikeväärtus: 0 1 auto.
Näide
Oletame, et meil on 3 elementi. Igaühe laius
on 200px ja kokku moodustavad nad 600px,
mis on suurem vanemakonteineri laiusest, mis
on 300px. Määrame esimese elemendi laiuseks
200px, teise elemendi - 300px,
kolmanda elemendi - 100px. Kõigil elementidel
olgu väärtus flex-basis võrdne 1,
ja flex-shrink - 1, 2, 3 vastavalt
elemendi järjekorranumbrile:
<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;
}
:
Vaata ka
-
omadus
flex-direction,
mis määrab flex-elementide telgede suuna -
omadus
justify-content,
mis määrab joondamise põhitelje suhtes -
omadus
align-items,
mis määrab joondamise risttelje suhtes -
omadus
flex-wrap,
mis määrab flex-elementide mitmerealise paigutuse -
omadus
flex-flow,
lühend flex-direction ja flex-wrap jaoks -
omadus
order,
mis määrab flex-elementide järjekorra -
omadus
align-self,
mis määrab üksiku elemendi joondamise -
omadus
flex-basis,
mis määrab konkreetse flex-elemendi suuruse -
omadus
flex-grow,
mis määrab flex-elementide "ahneuse" -
omadus
flex-shrink,
mis määrab flex-elementide kokkutõmbumise