Tailwind CSS `shrink-0`是啥意思？

Tailwind CSS近几年大受欢迎，github一些炙手可热的项目有的都用上了。

原子化和语义化的区别：

tailwind 是属于原子化css这种类型的。

语义化

之前我们常写的有语义化css，代码如下:

复制代码

.chat {
  display: flex;
  max-width: 24rem;
  margin: 0 auto;
  padding: 2rem;
}

原子化

原子化是更加关注css，代码如下：

复制代码

<div class="p-6 max-w-sm flex items-center"></div>

用写class来表示css规则，比如：

bg-white 代表 background-color: white;

这种的话就比较适合那种没有设计师具体到哪个像素，具体到什么什么单位的。适合独立开发或者小公司，前端去做中后台管理系统那种。

在使用 Flexbox 创建响应式布局时，控制元素是否"收缩"是个非常关键的问题。

Tailwind 提供了一个非常实用的类：shrink-0，它能让你的某些元素在容器空间不足时保持原样不被压缩。本文将带你彻底搞懂它的原理、用法与最佳实践。

什么是 `shrink-0`？

简单来说，shrink-0 就是 flex-shrink: 0 的快捷写法。默认情况下，所有 Flex 子元素都有 flex-shrink: 1，也就是说当空间不足时，它们会按比例变小。而 shrink-0 则禁止这一行为------该元素保持自己的尺寸，不管父容器有多小。

用途包括：

保证 logo、头像、图片等关键元素不被压缩；
实现左右固定+中间弹性布局；
创建稳定的卡片排版结构。

它到底怎么运作？

flex-shrink 是个比例因子。假设容器不足以容纳所有项目，就会出现"负空间"。浏览器会根据每个子项的 flex-shrink 值和大小，计算应该压缩多少。

公式如下：

复制代码

收缩量 = (该项目 shrink × 它的原始宽度) / 所有项目 shrink*宽度之和 × 负空间

如果你设置的是 shrink-0，那它乘上原始宽度就是 0，自然就不会被压缩了。

实战演示

示例一：防止图片被压缩

复制代码

<div class="flex w-64 border">
  <div class="shrink-0 w-32 h-32 bg-blue-500 text-white flex items-center justify-center">
    固定宽度
  </div>
  <div class="p-4 bg-red-500 text-white">
    内容会根据空间自动收缩
  </div>
</div>

示例二：导航栏中的应用

复制代码

<nav class="flex items-center bg-gray-800 text-white p-4">
  <div class="shrink-0 mr-4">
    <svg class="w-8 h-8" viewBox="0 0 20 20">...</svg>
  </div>
  <div class="flex space-x-4 overflow-x-auto">
    <a href="#">首页</a>
    <a href="#">产品</a>
    <a href="#">服务</a>
  </div>
  <div class="shrink-0 ml-auto">
    <button class="bg-gray-700 p-2 rounded-full">用户</button>
  </div>
</nav>

响应式技巧 & 高阶玩法

响应式收缩控制

小屏收缩，大屏固定

内容
与 flex-1 组合：

固定侧边栏

主内容
动态交互 + 过渡效果：

悬停时尝试收缩

其他内容

常见疑问

shrink-0 和 flex-none 有啥区别？
- shrink-0 只设置了不收缩；
- flex-none 是 flex: none，包括不增长、不收缩、宽度自适应。
shrink-0 没效果？
- 父元素可能没有加 flex
- 容器空间够用时自然不会收缩
- 元素本身宽度设置不合理

最佳实践小贴士

保住关键内容不被压缩（如：Logo、图标、按钮）
配合 overflow-auto 实现优雅滚动
长列表中慎用（避免渲染性能问题）
响应式控制：小屏可收缩，大屏固定显示

总结一句话

只要你想"锁住"某个元素，让它不管外界怎么变都不缩水，shrink-0 就是你的好帮手

Tailwind CSS `shrink-0`是啥意思？

什么是 shrink-0？

它到底怎么运作？

实战演示

示例一：防止图片被压缩

示例二：导航栏中的应用

响应式技巧 & 高阶玩法

常见疑问

最佳实践小贴士

总结一句话

什么是 `shrink-0`？