Properti order
Properti order menentukan urutan
item flex individual dalam
flex container. Diterapkan pada item flex tertentu.
Properti ini menerima nilai bilangan bulat positif atau negatif. Semakin kecil angkanya - semakin awal posisi elemen tersebut, terlepas dari posisinya dalam kode HTML relatif terhadap elemen lainnya.
Sintaks
selector {
order: bilangan positif atau negatif;
}
Contoh
Dalam contoh ini, urutan posisi semua blok
ditentukan menggunakan order. Blok pertama
adalah blok dengan order negatif -1,
diikuti dengan order 1 dan seterusnya secara 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
-
properti
flex-direction,
yang menentukan arah sumbu item flex -
properti
justify-content,
yang menentukan perataan sepanjang sumbu utama -
properti
align-items,
yang menentukan perataan sepanjang sumbu silang -
properti
flex-wrap,
yang menentukan multi-barisnya item flex -
properti
flex-flow,
shorthand untuk flex-direction dan flex-wrap -
properti
align-self,
yang menentukan perataan satu blok -
properti
flex-basis,
yang menentukan ukuran item flex tertentu -
properti
flex-grow,
yang menentukan kemampuan berkembang item flex -
properti
flex-shrink,
yang menentukan kemampuan menyusut item flex -
properti
flex,
shorthand untuk flex-grow, flex-shrink dan flex-basis