Order xususiyati

order xususiyati flex-konteyner ichidagi alohida flex-blokning ketma-ketligini belgilaydi. Muayyan flex blokga qo'llaniladi.

Xususiyat musbat yoki manfiy butun sonni qiymat sifatida qabul qiladi. Raqam qancha kichik bo'lsa, element shuncha oldin joylashadi, boshqa elementlarga nisbatan HTML kodidagi joylashuvidan qat'iy nazar.

Sintaksis

selector {
	order: musbat yoki manfiy son;
}

Misol

Ushbu misolda barcha bloklarga order yordamida joylashuv tartibi belgilangan. Eng birinchi bo'lib order -1 bo'lgan manfiy blok, keyin order 1 bo'lgan blok va hokazo o'sish tartibida:

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

Shuningdek qarang

flex-direction xususiyati,
bu flex bloklarning o'qlar yo'nalishini belgilaydi
justify-content xususiyati,
bu asosiy o'q bo'yicha tekislashni belgilaydi
align-items xususiyati,
bu ko'ndalang o'q bo'yicha tekislashni belgilaydi
flex-wrap xususiyati,
bu flex bloklarning ko'p qatorliligini belgilaydi
flex-flow xususiyati,
flex-direction va flex-wrap uchun qisqartma
align-self xususiyati,
bu bitta blokning tekislashini belgilaydi
flex-basis xususiyati,
bu muayyan flex blokning o'lchamini belgilaydi
flex-grow xususiyati,
bu flex bloklarning ochko'zligini belgilaydi
flex-shrink xususiyati,
bu flex bloklarning siqiluvchanligini belgilaydi
flex xususiyati,
flex-grow, flex-shrink va flex-basis uchun qisqartma