Перенос flex-элементов

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

Класс	Свойства
flex-wrap	flex-wrap: wrap;
flex-wrap-reverse	flex-wrap: wrap-reverse;
flex-nowrap	flex-wrap: nowrap;

Не переносить

Используйте flex-nowrap, чтобы предотвратить перенос flex-элементов, в результате чего flex-элементы при необходимости переполняют контейнер:

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

Переносить нормально

Используйте flex-wrap, чтобы позволить flex-элементам перенос:

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

Обратный перенос

Используйте flex-wrap-reverse, чтобы переносить flex-элементы в обратном направлении:

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

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

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

<div class="flex flex-wrap md:flex-wrap-reverse ...">
  <!-- ... -->
</div>

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

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

Варианты

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

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

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

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

Отключение

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

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