flex-grow
En esta página
| Clase | Propiedades CSS |
|---|---|
grow |
flex-grow: 1; |
grow-<number> |
flex-grow: <number>; |
grow-[<value>] |
flex-grow: <value>; |
grow-(<custom-property>) |
flex-grow: var(<custom-property>); |
Examples#
Allowing items to grow#
Use grow to allow a flex item to grow to fill any available space:
{
<div className="col-start-1 row-start-1 flex gap-4 rounded-lg font-mono text-sm leading-6 font-bold text-white">
<div className="flex size-14 flex-none items-center justify-center rounded-lg bg-sky-300 dark:bg-sky-800 dark:text-sky-400">
01
</div>
<div className="flex size-14 grow items-center justify-center rounded-lg bg-sky-500 p-4">02</div>
<div className="flex size-14 flex-none items-center justify-center rounded-lg bg-sky-300 p-4 dark:bg-sky-800 dark:text-sky-400">
03
</div>
</div>
</div>
}
<!-- [!code classes:grow] -->
<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>
Growing items based on factor#
Use grow-<number> utilities like grow-3 to make flex items grow proportionally based on their growth factor, allowing them to fill the available space relative to each other:
{
<div className="col-start-1 row-start-1 flex gap-4 rounded-lg font-mono text-sm leading-6 font-bold text-white">
<div className="flex size-14 grow-3 items-center justify-center rounded-lg bg-indigo-300 dark:bg-indigo-800 dark:text-indigo-400">
01
</div>
<div className="flex size-14 grow-7 items-center justify-center rounded-lg bg-indigo-500 p-4">02</div>
<div className="flex size-14 grow-3 items-center justify-center rounded-lg bg-indigo-300 p-4 dark:bg-indigo-800 dark:text-indigo-400">
03
</div>
</div>
</div>
}
<!-- [!code classes:grow-3,grow-7] -->
<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>
Preventing items from growing#
Use grow-0 to prevent a flex item from growing:
{
<div className="col-start-1 row-start-1 flex gap-4 rounded-lg font-mono text-sm leading-6 font-bold text-white">
<div className="flex size-14 grow items-center justify-center rounded-lg bg-pink-300 p-4 dark:bg-pink-800 dark:text-pink-400">
01
</div>
<div className="flex size-14 shrink-0 grow-0 items-center justify-center rounded-lg bg-pink-500">02</div>
<div className="hidden size-14 grow items-center justify-center rounded-lg bg-pink-300 p-4 md:flex dark:bg-pink-800 dark:text-pink-400">
03
</div>
</div>
</div>
}
<!-- [!code classes:grow-0] -->
<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>