flex-shrink

示例

允许 flex 项收缩

使用 shrink 允许 flex 项根据需要收缩：

<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>

防止项目收缩

使用 shrink-0 防止 flex 项收缩：

<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 收缩因子 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.