flex-direction CSS

Свойство flex-direction задаёт направление основных осей в контейнере и тем самым определяет положение флексов в контейнере.

На само направление также влияет значение атрибута dir у контейнера.

Свойство **`flex-direction`** задаёт направление основных осей в контейнере и тем самым определяет положение флексов в контейнере. На само направление также влияет значение атрибута `dir` у контейнера.
Значение по умолчанию:

row

Значение по умолчанию:
`row`
Наследуется:
Нет
Применяется:

К флекс-элементам

Применяется:
К флекс-элементам
Анимируется:
Нет
Спецификации:
Спецификации:
* [CSS Flexible Box Layout Module](https://www.w3.org/TR/css-flexbox/#propdef-flex-direction)
Поддержка браузерами:

Can I Use flexbox? Data on support for the flexbox feature across the major browsers from caniuse.com.

Поддержка браузерами:
<p class="ciu_embed" data-feature="flexbox" data-periods="future_1,current,past_1,past_2"> <a href="http://caniuse.com/#feat=flexbox">Can I Use flexbox?</a> Data on support for the flexbox feature across the major browsers from caniuse.com. </p>

Синтаксис

/* The direction text is laid out in a line */
flex-direction: row;

/* Like <row>, but reversed */
flex-direction: row-reverse;

/* The direction in which lines of text are stacked */
flex-direction: column;

/* Like <column>, but reversed */
flex-direction: column-reverse;

/* Global values */
flex-direction: inherit;
flex-direction: initial;
flex-direction: unset;

Синтаксис

/* The direction text is laid out in a line */ flex-direction: row; /* Like <row>, but reversed */ flex-direction: row-reverse; /* The direction in which lines of text are stacked */ flex-direction: column; /* Like <column>, but reversed */ flex-direction: column-reverse; /* Global values */ flex-direction: inherit; flex-direction: initial; flex-direction: unset;

Значения

  • row — Главная ось направлена так же, как и ориентация текста, по умолчанию слева направо. Если значение dir задано как rtl, то направление оси идёт справа налево.
  • row-reverse — Похоже на значение row, но меняются местами начальная и конечная точки и главная ось направлена справа налево. Если значение dir задано как rtl, то направление оси идёт слева направо.
  • column — Главная ось располагается вертикально и направлена сверху вниз.
  • column-reverse — Главная ось располагается вертикально, но меняется положение начальной и конечной точек и ось направлена снизу вверх.

Примечание

Safari до версии 9 поддерживает свойство -webkit-flex-direction.

Значения

* `row` -- Главная ось направлена так же, как и ориентация текста, по умолчанию слева направо. Если значение `dir` задано как `rtl`, то направление оси идёт справа налево. * `row-reverse` -- Похоже на значение `row`, но меняются местами начальная и конечная точки и главная ось направлена справа налево. Если значение `dir` задано как `rtl`, то направление оси идёт слева направо. * `column` -- Главная ось располагается вертикально и направлена сверху вниз. * `column-reverse` -- Главная ось располагается вертикально, но меняется положение начальной и конечной точек и ось направлена снизу вверх. ### Примечание Safari до версии 9 поддерживает свойство `-webkit-flex-direction`.

Примеры

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>flex-direction</title>
  <style>
   .flex-row {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    flex-direction: row-reverse;
   }
  </style>
 </head>
 <body>
  <ul class="flex-row">
   <li><img src="image/thumb1.jpg" alt=""></li>
   <li><img src="image/thumb2.jpg" alt=""></li>
   <li><img src="image/thumb3.jpg" alt=""></li>
  </ul> 
 </body>
</html>

Примеры

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>flex-direction</title> <style> .flex-row { padding: 0; margin: 0; list-style: none; display: flex; flex-direction: row-reverse; } </style> </head> <body> <ul class="flex-row"> <li><img src="image/thumb1.jpg" alt=""></li> <li><img src="image/thumb2.jpg" alt=""></li> <li><img src="image/thumb3.jpg" alt=""></li> </ul> </body> </html>

Содержание

  • Синтаксис
      /* The direction text is laid out in a line */ flex-direction: row; /* Like <row>, but reversed */ flex-direction: row-reverse; /* The direction in which lines of text are stacked */ flex-direction: column; /* Like <column>, but reversed */ flex-direction: column-reverse; /* Global values */ flex-direction: inherit; flex-direction: initial; flex-direction: unset;
  • Значения
    • Примеры
        <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>flex-direction</title> <style> .flex-row { padding: 0; margin: 0; list-style: none; display: flex; flex-direction: row-reverse; } </style> </head> <body> <ul class="flex-row"> <li><img src="image/thumb1.jpg" alt=""></li> <li><img src="image/thumb2.jpg" alt=""></li> <li><img src="image/thumb3.jpg" alt=""></li> </ul> </body> </html>

    В начало