Flexbox и Grid
Утилиты для управления тем, как flex элементы растут.
| Class | Styles |
|---|---|
grow | flex-grow: 1; |
grow-<number> | flex-grow: <number>; |
grow-[<value>] | flex-grow: <value>; |
grow-(<custom-property>) | flex-grow: var(<custom-property>); |
Используйте grow для разрешения flex элементу расти и заполнять любое доступное пространство:
<div class="flex ..."> <div class="size-14 flex-none ...">01</div> <div class="size-14 grow ...">02</div> <div class="size-14 flex-none ...">03</div></div>Используйте утилиты grow-<number> типа grow-3 для пропорционального роста flex элементов на основе их фактора роста, позволяя им заполнять доступное пространство относительно друг друга:
<div class="flex ..."> <div class="size-14 grow-3 ...">01</div> <div class="size-14 grow-7 ...">02</div> <div class="size-14 grow-3 ...">03</div></div>Используйте grow-0 для предотвращения роста flex элемента:
<div class="flex ..."> <div class="size-14 grow ...">01</div> <div class="size-14 grow-0 ...">02</div> <div class="size-14 grow ...">03</div></div>Используйте синтаксис grow-[<value>] , чтобы задать flex grow factor на основе полностью пользовательского значения:
<div class="grow-[25vw] ..."> <!-- ... --></div>Для переменных CSS вы также можете использовать синтаксис: grow-(<custom-property>)
<div class="grow-(--my-grow) ..."> <!-- ... --></div>Это просто сокращение, grow-[var(<custom-property>)] которое автоматически добавляет функцию var().
Префикс a flex-grow утилита с вариантом контрольной точки, например md:, чтобы применить утилиту только при размерах экрана medium и выше:
<div class="grow md:grow-0 ..."> <!-- ... --></div>Подробнее об использовании вариантов читайте в документации по вариантам.