CSS flex-direction Свойство
Пример
Задайте направление гибких элементов внутри элемента <div> в обратном порядке:
div
{
display: -webkit-flex; /* Safari */
-webkit-flex-direction: row-reverse; /* Safari 6.1+ */
display: flex;
flex-direction: row-reverse;
}
Определение и использование
Свойство flex-direction
указывает направление гибких элементов.
Примечание: Если элемент не является гибким элементом, свойство flex-direction
не имеет эффекта.
Значение по умолчанию: | row |
---|---|
Inherited: | no |
Animatable: | no. Читайте о animatable |
Version: | CSS3 |
Синтаксис JavaScript: | object.style.flexDirection="column-reverse" |
Поддержка браузера
Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
Номера followed by -webkit- or -moz- Укажат первую версию, которая работала с префиксом.
Свойство | |||||
---|---|---|---|---|---|
flex-direction | 29.0 21.0 -webkit- |
11.0 | 28.0 18.0 -moz- |
9.0 6.1 -webkit- |
17.0 |
Синтаксис CSS
flex-direction: row|row-reverse|column|column-reverse|initial|inherit;
Значения свойств
Значение | Описание | |
---|---|---|
row | Значение по умолчанию. Гибкие элементы отображаются горизонтально, в виде строки | |
row-reverse | Совпадает с строкой, но в обратном порядке | |
column | Гибкие элементы отображаются вертикально, в виде столбца | |
column-reverse | То же, что и столбец, но в обратном порядке | |
initial | Присваивает этому свойству значение по умолчанию. (Читайте о initial) | |
inherit | Наследует это свойство из родительского элемента. (Читайте о inherit) |
Похожие страницы
CSS Справочник: CSS Flexible Box
CSS Справка: flex-flow Свойство
CSS Справка: flex-wrap Свойство
CSS Справка: flex Свойство
CSS Справка: flex-grow Свойство
CSS Справка: flex-shrink Свойство
CSS Справка: flex-basis Свойство
HTML DOM Справочник: flexDirection Свойство