# order property

The `order` property specifies an order of a single `flex`-block inside a `flex`-container. It applies to a specific flex block.

The property value takes a positive or negative integer. The lower the number, the earlier the element will appear, regardless of its location in the HTML code relative to other elements.

## Syntax

`selector { order: positive or negative number; }`

## Example

In this example, all blocks are ordered using `order`. The very first block will be with negative `order` `-1`, then with `order` `1` and so on in ascending order:

`<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; }`

:

## See also

- the `flex-direction` property
  that specifies a direction of the flex block axes
- the `justify-content` property
  that sets an alignment along the cross axis
- the `align-items` property
  that sets an alignment along the cross axis
- the `flex-wrap` property
  that sets the multi-line nature of flex blocks
- the `flex-flow` property
  a shorthand for flex-direction and flex-wrap
- the `align-self` property
  that specifies an alignment of a single block
- the `flex-basis` property
  that sets a size of a certain flex block
- the `flex-grow` property
  that sets a greediness of flex blocks
- the `flex-shrink` property
  that sets a shrink of flex blocks
- the `flex` property
  a shorthand for flex-grow, flex-shrink and flex-basis

← →
↑
en ru