flex-direction
Поддержка браузерами
| 11.0+ | 28.0+ | 29.0+ | 17.0+ | 9.0+ |
Описание
CSS свойство flex-direction определяет направление расположения flex-элементов внутри flex-контейнера.
Примечание: если элемент не является flex-контейнером (display: flex), свойство flex-direction будет проигнорировано.
| Значение по умолчанию: | row |
|---|---|
| Применяется: | к flex-контейнерам |
| Анимируется: | нет |
| Наследуется: | нет |
| Версия: | CSS3 |
| Синтаксис JavaScript: | object.style.flexDirection="column-reverse"; |
Синтаксис
flex-direction: row|row-reverse|column|column-reverse;
Значения свойства
| Значение | Описание |
|---|---|
| row | Значение по умолчанию. flex-элементы отображаются горизонтально слева направо. |
| row-reverse | flex-элементы отображаются горизонтально справа налево. |
| column | flex-элементы отображаются вертикально сверху вниз. |
| column-reverse | flex-элементы отображаются вертикально снизу вверх. |
Пример
CSS Свойство:
flex-direction:
Результат:
1
2
3
4
5
CSS Код:
#main {
display: flex;
flex-direction: row;
}
display: flex;
flex-direction: row;
}