order касиети

order касиети flex-контейнердин ичиндеги өзүнчө flex-блоктун иреттүүлүгүн белгилейт. Аныкталган flex блогуна колдонулат.

Касиет оң же терс бүтүн санды маани катары кабыл алат. Сан канчалык кичине болсо, элемент ошончолук эрте турат, HTML кодунун башка элементтерге салыштырмалуу жайгашуусуна карабастан.

Синтаксис

селектор {
	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 касиети,
flex блокторунун огунун багытын белгилейт
justify-content касиети,
негизги огу боюнча тегиздөөнү белгилейт
align-items касиети,
көлдөө огу боюнча тегиздөөнү белгилейт
flex-wrap касиети,
flex блокторунун көп саптуулугун белгилейт
flex-flow касиети,
flex-direction жана flex-wrap үчүн кыскартуу
align-self касиeti,
бир блоктун тегиздөөсүн белгилейт
flex-basis касиети,
аныкталган flex блогунун өлчөмүн белгилейт
flex-grow касиети,
flex блокторунун өсүү коэффициентин белгилейт
flex-shrink касиети,
flex блокторунун кичирээк коэффициентин белгилейт
flex касиети,
flex-grow, flex-shrink жана flex-basis үчүн кыскартуу