# Свойство 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

← →
↑
en ru