Направление flex-элементов

Справочник классов по умолчанию

Класс	Свойства
flex-row	flex-direction: row;
flex-row-reverse	flex-direction: row-reverse;
flex-col	flex-direction: column;
flex-col-reverse	flex-direction: column-reverse;

Строка

Используйте flex-row для размещения flex-элементов по горизонтали в том же направлении, что и текст:

<div class="flex flex-row ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Реверсивная строка

Используйте flex-row-reverse для позиционирования flex-элементов по горизонтали в противоположном направлении:

<div class="flex flex-row-reverse ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Столбец

Используйте flex-col для вертикального расположения flex-элементов:

<div class="flex flex-col ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Реверсивный столбец

Используйте flex-col-reverse для размещения flex-элементов по вертикали в противоположном направлении:

<div class="flex flex-col-reverse ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Адаптивность

Чтобы применить утилиту направления flex-элементов только в определенной контрольной точке, добавьте префикс {screen}: к существующему имени класса. Например, добавление класса md:flex-row к элементу приведет к применению утилиты flex-row при средних размерах экрана и выше.

Для получения дополнительной информации о функциях адаптивного дизайна Tailwind ознакомьтесь с документацией Адаптивного дизайна.

  <div class="flex flex-col md:flex-row ...">
    <!-- ... -->
  </div>

Кастомизация

Варианты

По умолчанию, только responsive варианты создаются для утилит flex-direction.

Вы можете контролировать, какие варианты создаются для утилит flex-direction для изменения свойства flexDirection в разделе variants Вашего файла конфигурации tailwind.config.js.

Например, эта конфигурация также будет генерировать варианты hover и focus:

  // tailwind.config.js
  module.exports = {
    variants: {
      extend: {
        // ...
+       flexDirection: ['hover', 'focus'],
      }
    }
  }

Отключение

Если Вы не планируете использовать в своем проекте утилиты для изменения flex-direction, Вы можете полностью отключить их, установив для flexDirection свойство значение false в разделе corePlugins Вашего файла конфигурации:

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     flexDirection: false,
    }
  }