Flexbox & Grid
Utilities for controlling how flex items shrink.
Class | Styles |
---|---|
shrink | flex-shrink: 1; |
shrink-<number> | flex-shrink: <number>; |
shrink-[<value>] | flex-shrink: <value>; |
shrink-(<custom-property>) | flex-shrink: var(<custom-property>); |
Use shrink
to allow a flex item to shrink if needed:
Use shrink-0
to prevent a flex item from shrinking:
Use the shrink-[<value>]
syntax to set the flex shrink factor based on a completely custom value:
<div class="shrink-[calc(100vw-var(--sidebar))] ..."> <!-- ... --></div>
For CSS variables, you can also use the shrink-(<custom-property>)
syntax:
<div class="shrink-(--my-shrink) ..."> <!-- ... --></div>
This is just a shorthand for shrink-[var(<custom-property>)]
that adds the var()
function for you automatically.
Prefix a flex-shrink
utility with a breakpoint variant like md:
to only apply the utility at medium screen sizes and above:
<div class="shrink md:shrink-0 ..."> <!-- ... --></div>
Learn more about using variants in the variants documentation.