Атрибут CSS flex-direction

  • предыдущая страница flex-basis
  • следующая страница flex-flow

Определение и использование

Свойство flex-direction определяет направление эластичных элементов.

Комментарий:Если элемент не является эластичным элементом, то свойство flex не действует.

См. также:

Урок CSS:CSS эластичный контейнер

Руководство по CSS:атрибут flex

Руководство по CSS:атрибут flex-basis

Руководство по CSS:атрибут flex-flow

Руководство по CSS:атрибут flex-grow

Руководство по CSS:атрибут flex-shrink

Руководство по CSS:атрибут flex-wrap

Руководство по HTML DOM:атрибут flexDirection

пример

установить направление эластичных элементов внутри элемента <div> в обратном порядке:

div {
  display: flex;
  flex-direction: row-reverse; 
}

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

CSS синтаксис

flex-direction: row|row-reverse|column|column-reverse|initial|inherit;

значение атрибута

значение описание
row по умолчанию. Как строка, горизонтально отображает эластичные элементы.
row-reverse равные строки, но в обратном порядке.
column как колонки, вертикально отображает эластичные элементы.
column-reverse равные колонки, но в обратном порядке.
initial установить этот атрибут в его значение по умолчанию. См. также: initial.
inherit иногда inherits этот атрибут от родительского элемента. См. также: inherit.

технические детали

по умолчанию: row
наследование: нет
создание анимации: не поддерживается. См. также:атрибуты анимации.
версия: CSS3
JavaScript синтаксис: object.style.flexDirection="column-reverse"

более примеров

Использование flex-direction и медиа-запросов для создания различных макетов для различных размеров экрана/устройств:

.flex-container {
  display: flex;
  flex-direction: row;
}
/* адаптивная разметка - создание единственной колонки (100%) вместо двух колонок (50%) */
@media (max-width: 800px) {
  .flex-container {
    flex-direction: column;
  }
}

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

поддержка браузерами

Числа в таблице указывают на первую версию браузера, которая полностью поддерживает этот атрибут.

Числа с префиксами -webkit- или -moz- указывают на первую версию, использующую префикс.

Chrome IE / Edge Firefox Safari Opera
29.0
21.0 -webkit-		 11.0 28.0
18.0 -moz-		 9.0
6.1 -webkit-		 17.0
  • предыдущая страница flex-basis
  • следующая страница flex-flow