5 августа буду в отъезде. отвечаю по возможности

Свойство flex-direction

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

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

Синтаксис

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

Значения

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

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

Пример . Значение 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; }

:

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

  • свойство flex-direction,
    которое задает направление осей flex блоков
  • свойство 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