flex-direction

❮ Назад CSS Справочник Далее ❯

Пример

Установить направление гибких элементов внутри элемента <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	Устанавливает для этого свойства значение по умолчанию. Читайте о 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;
}
}

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