Свойство order

Свойство order флекс-контейнер ичидаги алохида flex-блокнинг жойлашув тартибини белгилайди. Алохида флекс-блокка татбиқ этилади.

Свойство мусбат ёки манфий бутун сон қийматини қабул қилади. Рақам қанча кичик бўлса, элемент шунча яқинроқ жойлашади, HTML кодда бошқа элементларга нисбатан жойлашган joyidan қатий назар.

Синтаксис

селектор {
	order: мусбат ёки манфий сон;
}

Мисол

Бу мисолда барча блокларга order орқали жойлашув тартиби белгиланган. Энг биринчи бўлиб манфий order -1 бўлган блок жойлашади, сўнгра order 1 бўлган блок ва ҳоказо осҳиш буйича:

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

Қараш мумкин

flex-direction свойстваси,
флекс блоклар ўқлари йўналишини белгилайди
justify-content свойстваси,
асосий ўқ буйича текислашни белгилайди
align-items свойстваси,
кўндаланг ўқ буйича текислашни белгилайди
flex-wrap свойстваси,
флекс блокларнинг кўп қatorliligini белгилайди
flex-flow свойстваси,
flex-direction ва flex-wrap учун қисқартма
align-self свойстваси,
бир блокни текислашни белгилайди
flex-basis свойстваси,
алохида флекс-блок ўлчамини белгилайди
flex-grow свойстваси,
флекс блокларнинг "очиқкоʻзлиги"ни белгилайди
flex-shrink свойстваси,
флекс блокларнинг қисқариш даражасини белгилайди
flex свойстваси,
flex-grow, flex-shrink ва flex-basis учун қисқартма