Свойство order задает порядок следования отдельно взятого flex-блока внутри flex-контейнера.

Применяется к: конкретному flex блоку.

См. все flexbox свойства: flex-direction, justify-content, align-items, flex-wrap, flex-flow, align-self, order, flex-basis, flex-grow, flex-shrink, flex.

Синтаксис

селектор {
	order: положительное или отрицательное число;
}

Значения

Значение Описание
Число Чем меньше число - тем раньше будет стоять элемент, назависимо от расположения в HTML коде относительно других элементов.

По умолчанию все блоки будут следовать друг за другом в порядке, заданном в html. Оно задается целым числом и по умолчанию равно 0.

Примеры

Пример

В данном примере всем блокам задан порядок расположения с помощью order. Самым первым будет блок с отрицательным order -1, потом с order 1 и так далее по возрастанию:

#parent {
	align-items: flex-start;
	flex-direction: row;
	display: flex;
}
#parent > div {
	border: 1px solid #696989;
	min-width: 100px;
}
#div1 {
	order: 4;
}
#div2 {
	order: 5;
}
#div3 {
	order: 3;
}
#div4 {
	order: 2;
}
#div5 {
	order: 1;
}
#div6 {
	order: -1;
}

Результат выполнения кода:

В HTML - №1
order: 4
В HTML - №2
order: 5
В HTML - №3
order: 3
В HTML - №4
order: 2
В HTML - №5
order: 1
В HTML - №6
order: -1