Свойство 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,
което задава подравняване на един блок
свойство flex-basis,
което задава размер на конкретен flex блок
свойство flex-grow,
което задава "гладност" на flex блоковете
свойство flex-shrink,
което задава свиваемост на flex блоковете
свойство flex,
съкращение за flex-grow, flex-shrink и flex-basis