flex: 1卡片宽度不均的根本原因是浏览器优先尊重内容的最小固有宽度（min-content size），如长英文单词、代码块等会阻止压缩，导致文字长短不同的卡片实际宽度不等；需配合flex: 0 1 calc(33.333% - 16px)、min-width: 0（ios用1px）、box-sizing: border-box及gap替代margin才能实现视觉等宽。
flex: 1 卡片宽度不均的根本原因
不是你写错了 flex: 1，而是浏览器在分配空间时，优先尊重内容的最小固有宽度（min-content size）。比如一个卡片里塞了长英文单词、<pre class="brush:php;toolbar:false;"></pre>代码块或未设 white-space 的表格数据，它就会拒绝被压缩到 flex-basis: 0 所暗示的“零宽”——结果就是：文字短的卡片缩得小，文字长的撑得大，哪怕都写了 flex: 1。
常见现象包括：
- 同一行三个卡片，中间那个明显更宽
- 卡片内含
<button></button>或<input>时宽度突变（尤其 iOS Safari） - React/Vue 渲染动态内容后，某张卡突然“弹出”变宽
用 flex-basis + min-width 强制等宽
别只依赖 flex: 1，显式控制基准和下限才是关键。对所有卡片统一设：
.card {
flex: 0 1 calc(33.333% - 16px); /* 不 grow，只 shrink，基准为 1/3 宽减 gap */
min-width: 0; /* 允许收缩到内容最小宽度以下（Chrome/Firefox） */
}
iOS Safari 需降级处理：
- 把
min-width: 0换成min-width: 1px（实测稳定） - 确保
box-sizing: border-box已作用于每个卡片，否则 padding/border 会额外加宽 - 若卡片含
<button></button>，必须单独加min-width: 1px和flex: 1 0 0
gap 替代 margin 防止换行错位
用 margin 控制卡片间距，在 flex-wrap: wrap 下极易出问题：每行首尾项多出半份 margin，导致视觉上左边空、右边挤，且响应式断点切换后 :nth-child(3n) 立刻失效。
正确做法是：
- 容器设
display: flex; flex-wrap: wrap; gap: 16px; - 卡片自身去掉所有
margin，尤其是margin-right和margin-bottom - 注意
gap不影响容器上下边缘——若顶部/底部留白异常，检查的是父容器padding或卡片自身margin-top/margin-bottom
内容不可断行时的兜底策略
当卡片里有长 URL、代码片段或固定宽度表格，flex-basis 再小也拦不住宽度膨胀。此时不能硬压，而要干预内容渲染：
- 给文本容器加
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - 但注意：
white-space: nowrap本身会加剧宽度不均，慎用；优先选white-space: normal+word-break: break-word - 对
<pre class="brush:php;toolbar:false;"></pre>类内容，加overflow-x: auto并设max-width: 100%，避免横向溢出破坏整行布局
真正容易被忽略的是：卡片宽度是否均匀，往往取决于最“难搞”的那张卡——它里面可能藏着一个没设 box-sizing 的 <input>，或一段没加 min-width: 1px 的按钮，而不是你写的主干样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
