Các tiện ích để kiểm soát cách các mục flex co lại.
| Class | Styles |
|---|---|
shrink | flex-shrink: 1; |
shrink-<number> | flex-shrink: <number>; |
shrink-[<value>] | flex-shrink: <value>; |
shrink-(<custom-property>) | flex-shrink: var(<custom-property>); |
Sử dụng shrink để cho phép một mục flex co lại nếu cần:
<div class="flex ..."> <div class="h-14 w-14 flex-none ...">01</div> <div class="h-14 w-64 shrink ...">02</div> <div class="h-14 w-14 flex-none ...">03</div></div>Sử dụng shrink-0 để ngăn cản một mục flex co lại:
<div class="flex ..."> <div class="h-16 flex-1 ...">01</div> <div class="h-16 w-32 shrink-0 ...">02</div> <div class="h-16 flex-1 ...">03</div></div>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.