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

Увеличиваться

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

Не увеличиваться

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

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

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

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

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

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

Значения увелечения

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

  // tailwind.config.js
  module.exports = {
    theme: {
      flexGrow: {
        '0': 0,
-       DEFAULT: 1,
+       DEFAULT: 2,
+       '1': 1,
      }
    }
  }

Варианты

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

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

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

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

Отключение

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

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