Order-ominaisuus
order-ominaisuus määrittää yksittäisen
flex-lohkon sijaintijärjestyksen
flex-säiliössä. Sitä sovelletaan tiettyyn
flex-lohkoon.
Ominaisuus hyväksyy positiivisen tai negatiivisen kokonaisluvun arvoksi. Mitä pienempi luku on, sitä aikaisemmin elementti sijoitetaan, riippumatta sen sijainnista HTML-koodissa suhteessa muihin elementteihin.
Syntaksi
valitsija {
order: positiivinen tai negatiivinen luku;
}
Esimerkki
Tässä esimerkissä kaikkien lohkojen sijaintijärjestys on
määritetty käyttämällä order-ominaisuutta. Ensimmäisenä
tulee lohko, jolla on negatiivinen order -1,
sitten lohko, jolla on order 1, ja niin edelleen
nousevassa järjestyksessä:
<div id="parent">
<div id="elem1">1</div>
<div id="elem2">2</div>
<div id="elem3">3</div>
<div id="elem4">4</div>
<div id="elem5">5</div>
<div id="elem6">6</div>
</div>
#parent {
display: flex;
align-items: flex-start;
flex-direction: row;
}
#parent > div {
border: 1px solid #696989;
min-width: 100px;
}
#elem1 {
order: 4;
}
#elem2 {
order: 5;
}
#elem3 {
order: 3;
}
#elem4 {
order: 2;
}
#elem5 {
order: 1;
}
#elem6 {
order: -1;
}
:
Katso myös
-
ominaisuus
flex-direction,
joka määrittää flex-lohkojen akselien suunnan -
ominaisuus
justify-content,
joka määrittää tasauksen pääakselilla -
ominaisuus
align-items,
joka määrittää tasauksen poikkisuuntaisella akselilla -
ominaisuus
flex-wrap,
joka määrittää flex-lohkojen monirivisyyden -
ominaisuus
flex-flow,
lyhenne flex-directionille ja flex-wraplle -
ominaisuus
align-self,
joka määrittää yhden lohkon tasauksen -
ominaisuus
flex-basis,
joka määrittää tietyn flex-lohkon koon -
ominaisuus
flex-grow,
joka määrittää flex-lohkojen "ahneuden" -
ominaisuus
flex-shrink,
joka määrittää flex-lohkojen kutistuvuuden -
ominaisuus
flex,
lyhenne flex-growlle, flex-shrinkille ja flex-basikselle