Свойство Style flexDirection

Определение и использование

flexDirection Устанавливает или возвращает направление эластичного элемента.

Комментарий:Если элемент не является эластичным элементом, то flexDirection Атрибут недействителен.

Дополнительная информация:

CSS Руководство по стилям:flex-direction

Пример

Перестроить направление эластичных элементов внутри элемента <div>:

document.getElementById("main").style.flexDirection = "column-reverse";

Попробуйте сами

Синтаксис

Возврат свойства flexDirection:

объект.style.flexDirection

Установка свойства flexDirection:

объект.style.flexDirection = "row|row-reverse|column|column-reverse|initial|inherit"

Значение атрибута

Значение Описание
row Значение по умолчанию. Элементы эластичности отображаются горизонтально, как строка.
row-reverse Как и row, но в обратном порядке.
column Элементы эластичности отображаются вертикально, как колонка.
column-reverse Как и column, но в обратном порядке.
initial Этот атрибут устанавливается в его значение по умолчанию. См. initial.
inherit Этот атрибут наследуется от родительского элемента. См. inherit.

Технические детали

Значение по умолчанию: row
Возвратное значение: Строка, представляющая flex-direction.
Версия CSS: CSS3

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

Числа в таблице указывают на версию первого браузера, который полностью поддерживает этот атрибут.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Поддержка 11.0 Поддержка 9.0 Поддержка

Связанные страницы

HTML DOM STYLE Руководство по стилям:flex

HTML DOM STYLE Руководство по стилям:flexBasis

HTML DOM STYLE Руководство по стилям:flexFlow

HTML DOM STYLE Руководство по стилям:flexGrow

HTML DOM STYLE Руководство по стилям:flexShrink

HTML DOM STYLE Руководство по стилям:flexWrap