Lzh on GitHub

flex-shrink

控制弹性项目如何缩小的实用工具。

快速参考

类样式
shrinkflex-shrink: 1;
shrink-<number>flex-shrink: <number>;
shrink-[<value>]flex-shrink: <value>;
shrink-(<custom-property>)flex-shrink: var(<custom-property>);
为flex布局子元素属性。

示例

允许弹性项目缩小

使用 shrink 允许弹性项目在必要时缩小：

01
02
<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 阻止弹性项目缩小：

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

使用自定义值

使用 shrink-[<value>] 语法根据完全自定义的值设置 flex 缩小因子：

<div class="shrink-[calc(100vw-var(--sidebar))] ...">
  <!-- ... -->
</div>

对于 CSS 变量，您还可以使用 shrink-(<custom-property>) 语法：

<div class="shrink-(--my-shrink) ...">
  <!-- ... -->
</div>

这只是 shrink-[var(<custom-property>)] 的简写形式，它会自动为您添加 var() 函数。

响应式设计

使用断点变体（例如 md:）作为 flex-shrink 实用工具的前缀，以便仅在中等尺寸及以上的屏幕上应用该实用工具：

<div class="shrink md:shrink-0 ...">
  <!-- ... -->
</div>

在 变体文档 中了解更多关于使用变体的信息。