# Свойство flex-direction

Свойство `flex-direction` устанавливает направление главной и поперечной оси или, говоря другими словами, расставляет элементы в ряд или в колонку.

Применяется к родительскому элементу для flex блоков. Входит в свойство-сокращение `flex-flow`.

## Синтаксис

`селектор { flex-direction: row | row-reverse | column | column-reverse; }`

## Значения

Значение | Описание
--- | ---
`row` | Главная ось направлена слева направо. Элементы расположены в ряд, по умолчанию прижаты к левому краю, их нумерация имеет обычный порядок - слева направо.
`row-reverse` | Главная ось направлена справа налево. Элементы расположены в ряд, по умолчанию прижаты к правому краю, их нумерация имеет обратный порядок - справа налево.
`column` | Главная ось направлена сверху вниз. Элементы расположены в колонку, по умолчанию прижаты к верху, их нумерация имеет обычный порядок - сверху вниз.
`column-reverse` | Главная ось направлена снизу вверх. Элементы расположены в колонку, по умолчанию прижаты к низу, их нумерация имеет обратный порядок - снизу вверх.

Значение по умолчанию: `row`.

## Пример

Элементы расположены в ряд, по умолчанию прижаты к левому краю, их нумерация имеет обычный порядок - слева направо:

`<div id="parent"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div>` `#parent { flex-direction: row; display: flex; } #parent > div { border: 1px solid #696989; width: 100px; height: 50px; }`

:

## Пример . Значение row-reverse

Элементы расположены в ряд, по умолчанию прижаты к правому краю, их нумерация имеет обратный порядок - справа налево:

`<div id="parent"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div>` `#parent { flex-direction: row-reverse; display: flex; } #parent > div { border: 1px solid #696989; width: 100px; height: 50px; }`

:

## Пример . Значение column

Элементы расположены в колонку, по умолчанию прижаты к верху, их нумерация имеет обычный порядок - сверху вниз:

`<div id="parent"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div>` `#parent { flex-direction: column; display: flex; } #parent > div { border: 1px solid #696989; width: 100px; height: 50px; }`

:

## Пример . Значение column-reverse

Элементы расположены в колонку, по умолчанию прижаты к низу, их нумерация имеет обратный порядок - снизу вверх:

`<div id="parent"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div>` `#parent { flex-direction: column-reverse; display: flex; } #parent > div { border: 1px solid #696989; width: 100px; height: 50px; }`

:

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

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

← →
↑
en ru