Flex-элементы

Исходный

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

Гибкий 1

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

Авто

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

Ничего

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

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

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

<div class="flex ...">
  <!-- ... -->
  <div class="flex-none md:flex-1 ...">
    Адаптивный гибкий элемент
  </div>
  <!-- ... -->
</div>

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

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

Гибкие значения

По умолчанию Tailwind предоставляет четыре flex утилиты. Вы изменяете, добавляете или удаляете их, редактируя раздел theme.flex Вашей конфигурации Tailwind.

  // tailwind.config.js
  module.exports = {
    theme: {
      flex: {
        '1': '1 1 0%',
        auto: '1 1 auto',
-       initial: '0 1 auto',
+       inherit: 'inherit',
        none: 'none',
+       '2': '2 2 0%',
      }
    }
  }

Варианты

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

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

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

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

Отключение

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

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