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.

Поддержка браузеров

Свойство flex-direction поддерживается во всех основных браузерах.

Читайте также

Похожие посты

CSS-свойство clip

Определяет координаты области, которая будет кадрирована, т.е. содержимое за пределом этой области будет отрезано

CSS-свойство bottom

Задает смещение или отступ от нижнего края элемента

CSS-свойство text-align-last

Указывает, как выравнивается последняя строка блока или строка непосредственно перед принудительным разрывом строки

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.