order Özelliği

order özelliği, bir flex konteyner içindeki tek bir flex bloğunun sıralama düzenini belirler. Belirli bir flex bloğuna uygulanır.

Özellik, pozitif veya negatif bir tamsayı değerini alır. Sayı ne kadar küçükse, öğe HTML kodundaki diğer öğelere göre konumundan bağımsız olarak o kadar erken yerleştirilir.

Sözdizimi

seçici {
	order: pozitif veya negatif sayı;
}

Örnek

Bu örnekte, tüm bloklara order kullanılarak bir sıralama düzeni verilmiştir. İlk olarak negatif order -1 değerine sahip blok, ardından order 1 değerine sahip blok ve sonrasında artan sırada diğerleri gelecektir:

<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;
}

Ayrıca Bakınız

flex-direction özelliği,
flex bloklarının eksen yönünü belirler
justify-content özelliği,
ana eksen boyunca hizalamayı belirler
align-items özelliği,
çapraz eksen boyunca hizalamayı belirler
flex-wrap özelliği,
flex bloklarının çok satırlılığını belirler
flex-flow özelliği,
flex-direction ve flex-wrap için kısaltmadır
align-self özelliği,
tek bir bloğun hizalamasını belirler
flex-basis özelliği,
belirli bir flex bloğunun boyutunu belirler
flex-grow özelliği,
flex bloklarının büyüme faktörünü belirler
flex-shrink özelliği,
flex bloklarının küçülme faktörünü belirler
flex özelliği,
flex-grow, flex-shrink ve flex-basis için kısaltmadır