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