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