flex

Примеры

Базовый пример

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

<div class="flex">  <div class="w-14 flex-none ...">01</div>  <div class="w-64 flex-1 ...">02</div>  <div class="w-32 flex-1 ...">03</div></div>

Initial

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

<div class="flex">  <div class="w-14 flex-none ...">01</div>  <div class="w-64 flex-initial ...">02</div>  <div class="w-32 flex-initial ...">03</div></div>

Auto

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

<div class="flex ...">  <div class="w-14 flex-none ...">01</div>  <div class="w-64 flex-auto ...">02</div>  <div class="w-32 flex-auto ...">03</div></div>

None

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

<div class="flex ...">  <div class="w-14 flex-none ...">01</div>  <div class="w-32 flex-none ...">02</div>  <div class="flex-1 ...">03</div></div>

Использование пользовательского значения

Используйте синтаксис flex-[<value>] , чтобы задать flex shorthand property на основе полностью пользовательского значения:

<div class="flex-[3_1_auto] ...">  <!-- ... --></div>

Для переменных CSS вы также можете использовать синтаксис: flex-(<custom-property>)

<div class="flex-(--my-flex) ...">  <!-- ... --></div>

Это просто сокращение, flex-[var(<custom-property>)] которое автоматически добавляет функцию var().

Адаптивный дизайн

Префикс a flex утилита с вариантом контрольной точки, например md:, чтобы применить утилиту только при размерах экрана medium и выше:

<div class="flex-none md:flex-1 ...">  <!-- ... --></div>

Подробнее об использовании вариантов читайте в документации по вариантам.