Свойство 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;
}