CSS :: Свойство order

css-свойство order (от англ. order – порядок) переопределяет порядок (очередность) отображения флекс-элементов внутри флекс-контейнера.

Характеристики

Значение по умолчанию: 0.
Применяется: к флекс-элементам.
Наследуется: нет.
Анимируется: да.
JavaScript: object.style.order="value".

Синтаксис

order: <число>

Значения

В качестве значений свойство принимает целые числа (как положительные, так и отрицательные). В результате флекс-элементы с меньшими значениями свойства order выводятся раньше, а элементы, имеющие большие значения выводятся позже. Если флекс-элементы имеют одинаковые значения свойства order, они выводятся согласно их первоначальному порядку.

Ссылки

Официальный сайт W3C: https://drafts.csswg.org/css-flexbox-1/#propdef-order

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/order

Подробнее о модуле Flexbox смотрите в нашем учебнике здесь.

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>

	<style>
		/* Оформляем родительские div'ы flex-элементов */
		div{
		display: flex;
		width: 250px;
		height: 250px;
		margin: auto;
		margin-top: 10px;
		background-color: #DFDFDF;
		border-radius: 5px;
		}
		
		/* Это общий стиль flex-элементов */		
		p, span{
		width: 40px;
		height: 40px;
		margin: auto;
		padding: 10px;
		background-color: #55aa55;
		border-radius: 5px;
		text-align: center;
		font-weight: bold;
		color: #F9F9F9;
		}

		/* Это класс для 1-го и 2-го div'ов */	
		.div_flex_1, .div_flex_2{
		flex-flow: row wrap;
		}
		
		/* Это класс для 3-го и 4-го div'ов */		
		.div_flex_3, .div_flex_4{
		flex-flow: column wrap;
		}
						
	</style>
</head>
<body>

	<div class="div_flex_1">
		<p>1</p><span>2</span><p>3</p><span>4</span>
		<p>5</p><span>6</span><p>7</p><span>8</span>
	</div>

	<div class="div_flex_2">
		<p>1</p><span>2</span>
		<p style="order: 1">3</p>
		<span>4</span><p>5</p>
		<span style="order: 8">6</span>
		<p>7</p><span>8</span>
	</div>

	<div class="div_flex_3">
		<p>1</p><span>2</span><p>3</p><span>4</span>
		<p>5</p><span>6</span><p>7</p><span>8</span>
	</div>

	<div class="div_flex_4">
		<p>1</p><span>2</span>
		<p style="order: 1">3</p>
		<span>4</span><p>5</p>
		<span style="order: 8">6</span>
		<p>7</p><span>8</span>
	</div>

</body>
</html>

Пример №1