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

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

Значение по умолчанию:	`row`
Применяется к:	Flex-контейнер
Наследование:	Нет
Анимирование:	Нет. Анимируемые свойства
Версия:	Новый в CSS3

Синтакс

Синтаксически свойства задаются по следующему шаблону:

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

Примеры написания кода свойства flex-direction:

.flex-container {
    /* Safari */
    display: -webkit-flex;
    -webkit-flex-direction: row-reverse;
    /* Standard syntax */
    display: flex;
    flex-direction: row-reverse;    
}

Значения свойств

В следующей таблице описаны значения этого свойства.

Значение	Описание
`row`	Основная ось flex-контейнера имеет ту же ориентацию, что и основная ось направления текста.
`row-reverse`	То же, что `row`, но начальная и конечная точки оси меняются местами.
`column`	Основная ось гибкого контейнера должна иметь ту же ориентацию, что и ось блока (вертикальная ось в режимах горизонтальной записи и горизонтальная ось в режимах вертикальной записи) текущего направления текста.
`column-reverse`	То же, что `column`, но начальная и конечная точки оси меняются местами.
`initial`	Устанавливает это свойство в значение по умолчанию.
`inherit`	Если указан, связанный элемент принимает вычисленное значение своего родительского элемента `flex-direction`.