Свойство 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="elem5">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;
}
#div4 {
	order: 2;
}
#elem5 {
	order: 1;
}
#elem6 {
	order: -1;
}

Смотрите также

свойство flex-direction,
которое задает направление осей flex блоков
свойство justify-content,
которое задает выравнивание по главной оси
свойство align-items,
которое задает выравнивание по поперечной оси
свойство flex-wrap,
которое многострочность flex блоков
свойство flex-flow,
сокращение для flex-direction и flex-wrap
свойство order,
которое задает порядок flex блоков
свойство align-self,
которое задает выравнивание одного блока
свойство flex-basis,
которое задает размер конкретного flex блока
свойство flex-grow,
которое задает жадность flex блоков
свойство flex-shrink,
которое задает сжимаемость flex блоков
свойство flex,
сокращение для flex-grow, flex-shrink и flex-basis