Ciri order
Ciri order menetapkan susunan
blok flex individu dalam
flex-bekas. Digunakan pada
blok flex tertentu.
Ciri ini menerima nilai integer positif atau negatif. Semakin kecil nombor - semakin awal elemen akan diletakkan, tidak kira kedudukannya dalam kod HTML relatif kepada elemen lain.
Sintaks
pemilih {
order: nombor positif atau negatif;
}
Contoh
Dalam contoh ini, semua blok diberikan susunan
menggunakan order. Blok pertama
akan menjadi blok dengan order negatif -1,
kemudian dengan order 1 dan seterusnya dalam tertib menaik:
<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;
}
:
Lihat juga
-
ciri
flex-direction,
yang menetapkan arah paksi blok flex -
ciri
justify-content,
yang menetapkan penjajaran sepanjang paksi utama -
ciri
align-items,
yang menetapkan penjajaran sepanjang paksi silang -
ciri
flex-wrap,
yang menetapkan kebolehbilangan baris berganda blok flex -
ciri
flex-flow,
penyingkatan untuk flex-direction dan flex-wrap -
ciri
align-self,
yang menetapkan penjajaran satu blok -
ciri
flex-basis,
yang menetapkan saiz blok flex tertentu -
ciri
flex-grow,
yang menetapkan ketamakan blok flex -
ciri
flex-shrink,
yang menetapkan kebolehmampatan blok flex -
ciri
flex,
penyingkatan untuk flex-grow, flex-shrink dan flex-basis