只写 flex: 1 卡片不等宽，是因为其简写为 flex: 1 1 0%，但旧版浏览器（如IE11）常回退为 flex: 1 1 auto，使 flex-basis 按内容宽度计算，导致起点不一致；必须显式设 flex-basis: 0% 或 0px 并配合 min-width: 0 才能真正等宽。
为什么只写 flex: 1 卡片还是不等宽
因为 flex: 1 实际是 flex: 1 1 0% 的简写，但很多浏览器（尤其旧版）会回退为 flex: 1 1 auto，导致 flex-basis 按内容宽度计算——文字多的卡片起点宽，文字少的起点窄，flex-grow: 1 只是在各自起点上“均分剩余空间”，视觉上依然不齐。
常见现象：.card 里有标题+短描述 vs 标题+长段落，宽度差一截；开发者工具里看到 “Flex Basis” 列显示 auto 或具体像素值（如 124px），就说明没真正归零。
- 必须显式写
flex-basis: 0或flex-basis: 0%，不能依赖简写 - IE11 必须用
flex-basis: 0%，0或0px会被忽略 - 父容器没设
display: flex？所有 flex 属性静默失效，控制台不报错
flex-basis: 0 配合 flex-grow: 1 才是真等宽
这是目前最稳定、跨浏览器兼容的写法：所有卡片从“零主轴宽度”起步，再平分父容器全部可用宽度。内容多少不影响起点，只影响内部换行和高度。
示例代码：
立即学习“前端免费学习笔记（深入）”；
.cards-container {
display: flex;
width: 100%;
}
.card {
flex: 1 1 0; /* 等价于 flex-grow: 1; flex-shrink: 1; flex-basis: 0 */
min-width: 0; /* 关键！防止图片/长文本强制撑开最小宽度 */
box-sizing: border-box;
}-
min-width: 0是隐藏关键点：否则含图片或长单词的卡片会按内容最小宽度卡住，不收缩 - 如果卡片内有图片，记得加
img { max-width: 100%; height: auto; }，避免破坏 flex 计算 - 不要同时设
width和flex-basis，width会覆盖flex-basis，导致行为不可控
加间距时别用 margin，改用 gap
给卡片加左右间隔时，如果用 margin-right，最后一项会多出空白，且小屏下容易触发换行（flex 容器把 margin 当作子项占位空间计算）。
现代方案直接用 gap：
.cards-container {
display: flex;
gap: 16px; /* 代替 margin */
width: 100%;
}
.card {
flex: 1 1 0;
min-width: 0;
}-
gap不参与 flex 分配，只控制子项间隙，不会影响等宽逻辑 - 兼容性：Chrome 84+/Firefox 63+/Safari 14.1+ 支持；老版本 Safari 需加
-webkit-gap - 若需支持更老环境，用伪元素或包裹层模拟 gap，但别用
margin破坏 flex 流
响应式下等宽突然失效？检查 flex-wrap 和容器宽度
卡片在小屏变两行后，每行内部仍等宽，但“三列→两行→第一行两个、第二行一个”，视觉上就显得不均——这不是 flex 错误，是布局结构变化。
解决方向取决于需求：
- 想始终保持单行：加
flex-wrap: nowrap，并配合overflow-x: auto允许横向滚动 - 想随屏幕列数自适应：用媒体查询改
flex-basis，比如@media (max-width: 768px) { .card { flex-basis: 50%; } } - 移动端注意：父容器用了
width: 100vw？滚动条占位会让实际宽度变小，卡片被挤换行；建议改用width: 100%或max-width: 100vw
真正难的不是写对 flex-grow，而是每次宽度异常时，要依次排查：display: flex 是否生效、flex-basis 是否为 0、min-width 是否锁死、box-sizing 是否统一、外部滚动条是否偷空间。
