Сжатие flex-элементов

Сжиматься

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

Не сжиматься

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

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

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

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

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

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

Значения Сжатия

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

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

Варианты

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

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

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

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

Отключение

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

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