Вы здесь

CSS свойство flex-direction

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

CSS синтаксис

flex-direction: row | row-reverse | column | column-reverse | initial | inherit;

Возможные значения

Значение Описание
row Значение по умолчанию. Главная ось направлена так же, как и ориентация текста, по умолчанию слева направо. Если значение dir задано как rtl, то направление оси идёт справа налево.
row-reverse То же, что и значение row, но в обратном порядке.
column Главная ось располагается вертикально и направлена сверху вниз.
column-reverse То же, что и значение column, но в обратном порядке.
inherit Значение наследуется от родительского элемента.
initial Устанавливает значение по умолчанию.

Пример

Устанавливаем направление флекс-элементов внутри контейнера <div> в обратном порядке


div {
    display: -webkit-flex; /* Safari */
     -webkit-flex-direction: row-reverse; /* Safari 6.1+ */
     display: flex;
     flex-direction: row-reverse; 
}