flex-direction
Установить направление гибких элементов внутри элемента <div> в обратном порядке:
div
{
display: flex;
flex-direction: row-reverse;
}
Попробуйте сами »
Определение flex-direction
CSS свойство flex-direction
определяет направление гибких элементов.
Примечание: Если элемент не является гибким элементом, CSS свойство flex-direction
не имеет никакого эффекта.
Значение по умолчанию: | row |
---|---|
Унаследовано: | no |
Анимируемый: | no. Читайте о animatable |
Версия: | CSS3 |
JavaScript синтаксис: | object.style.flexDirection="column-reverse" Попробуй |
Поддержка flex-direction
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.
Цифры, за которыми следуют -webkit- или -moz - указывают первую версию, которая работала с префиксом.
Свойство | |||||
---|---|---|---|---|---|
flex-direction | 29.0 21.0-webkit- |
11.0 | 28.0 18.0-moz- |
9.0 6.1-webkit- |
17.0 |
Синтаксис flex-direction
flex-direction: row|row-reverse|column|column-reverse|initial|inherit;
Значения flex-direction
Значение | Описание | Демонстрация |
---|---|---|
row | Значение по умолчанию. Гибкие элементы отображаются горизонтально, в виде строки | Демо ❯ |
row-reverse | То же, что и строка, но в обратном порядке | Демо ❯ |
column | Гибкие элементы отображаются вертикально, в виде столбца | Демо ❯ |
column-reverse | То же, что и в столбце, но в обратном порядке | Демо ❯ |
initial | Устанавливает для этого свойства значение по умолчанию. Читайте о initial | |
inherit | Наследует это свойство от своего родительского элемента. Читайте о inherit |
Примеры flex-direction
Using flex-direction
together with media queries to create a different layout for different screen sizes/devices:
.flex-container {
display: flex;
flex-direction: row;
}
/*
Адаптивный макет - создает макет с одной колонкой вместо макета с двумя колонками
*/
@media (max-width: 800px) {
.flex-container {
flex-direction: column;
}
}
Попробуйте сами »
Страницы по теме flex-direction
CSS Учебник: CSS Гибкий бокс
CSS Справочник: flex-flow свойство
CSS Справочник: flex-wrap свойство
CSS Справочник: flex свойство
CSS Справочник: flex-grow свойство
CSS Справочник: flex-shrink свойство
CSS Справочник: flex-basis свойство
HTML DOM справочник: flexDirection свойство