Flex-ominaisuus
Ominaisuus flex on lyhenne ominaisuuksille flex-basis,
flex-shrink
ja flex-grow.
Sovelletaan: yksittäiseen flex-elementtiin.
Arvojen järjestyksellä ei ole väliä. Toinen ja kolmas
parametri (flex-shrink, flex-basis)
eivät ole pakollisia.
Arvot
Katso vastaavat ominaisuudet.
Oletusarvo: 0 1 auto.
Esimerkki
Oletetaan, että meillä on 3 elementtiä. Kunkin leveys
on 200px ja yhteensä ne ovat 600px leveitä,
mikä on enemmän kuin vanhempakontainerin leveys, joka
on 300px. Asetetaan ensimmäisen elementin leveys
200px, toisen elementin - 300px,
kolmannen elementin - 100px. Kaikille elementeille
olkoon flex-basis-arvona 1,
ja flex-shrink - 1, 2, 3 vastaavasti
elementin järjestysnumeron mukaan:
<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;
}
:
Katso myös
-
ominaisuus
flex-direction,
joka asettaa flex-elementtien akselien suunnan -
ominaisuus
justify-content,
joka asettaa tasauksen pääakselilla -
ominaisuus
align-items,
joka asettaa tasauksen poikkidakselilla -
ominaisuus
flex-wrap,
joka asettaa flex-elementtien monirivisyyden -
ominaisuus
flex-flow,
lyhenne flex-direction ja flex-wrap -ominaisuuksille -
ominaisuus
order,
joka asettaa flex-elementtien järjestyksen -
ominaisuus
align-self,
joka asettaa yhden elementin tasauksen -
ominaisuus
flex-basis,
joka asettaa tietyn flex-elementin koon -
ominaisuus
flex-grow,
joka asettaa flex-elementtien "ahneuden" -
ominaisuus
flex-shrink,
joka asettaa flex-elementtien kutistuvuuden