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