Die flex eienskap
Die eienskap flex is 'n afkorting vir flex-basis,
flex-shrink
en flex-grow.
Van toepassing op: 'n spesifieke flex-item.
Die volgorde van die waardes maak nie saak nie. Die tweede en derde
parameters (flex-shrink, flex-basis)
is nie verpligtend nie.
Waardes
Sien die ooreenstemmende eienskappe.
Standaardwaarde: 0 1 auto.
Voorbeeld
Laat ons 3 items hê. Die breedte van elkeen van hulle
is 200px en saam gelyk aan 600px,
wat meer is as die breedte van die ouerkonteiner, wat
gelyk is aan 300px. Kom ons ken vir die eerste item 'n breedte toe van
200px, vir die tweede item - 300px, vir
die derde item - 100px. Laat by alle items
die waarde flex-basis gelyk wees aan 1,
en flex-shrink - 1, 2, 3 ooreenkomstig
met die volgorde nommer van die item:
<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;
}
:
Sien ook
-
die eienskap
flex-direction,
wat die rigting van die flex-asses spesifiseer -
die eienskap
justify-content,
wat belyning langs die hoof-as spesifiseer -
die eienskap
align-items,
wat belyning langs die dwars-as spesifiseer -
die eienskap
flex-wrap,
wat veelvuldige reëls vir flex-items spesifiseer -
die eienskap
flex-flow,
afkorting vir flex-direction en flex-wrap -
die eienskap
order,
wat die volgorde van flex-items spesifiseer -
die eienskap
align-self,
wat die belyning van 'n enkele item spesifiseer -
die eienskap
flex-basis,
wat die grootte van 'n spesifieke flex-item spesifiseer -
die eienskap
flex-grow,
wat die "gulheid" van flex-items spesifiseer -
die eienskap
flex-shrink,
wat die inkrimpbaarheid van flex-items spesifiseer
