列宽不一致的根源是 flex-grow/shrink 干预及内容差异；应设 flex: 0 0 calc(25% - 8px) 锁定基准、禁用伸缩，并配合 gap、min/max-width 与 CSS 变量实现响应式等宽布局。
flex-basis 设为相同值后列宽还是不一致？
常见原因是 flex-basis 仅设定了初始主轴尺寸，但 flex-grow 和 flex-shrink 仍会参与计算。默认 flex: 1 1 auto 中的 flex-grow: 1 会让所有子项等比例拉伸剩余空间，若内容高度不同、换行或内边距不一致，视觉上就会“不整齐”。
- 检查是否遗漏了
flex-shrink: 0—— 否则容器缩小时列会被压缩 - 确认父容器
display: flex和flex-wrap: wrap是否正确启用（多列通常需换行） - 避免子项内部使用
width: 100%或固定margin，它们会干扰 flex 计算
如何让多列真正等宽且不随内容撑开？
关键不是只设 flex-basis，而是锁定增长、收缩和基准三者行为。最稳妥写法是显式声明完整 flex 缩写：
item {
flex: 0 0 calc(25% - 8px); /* 4列，减去间隙 */
}说明：
-
flex: 0 0 ...表示flex-grow: 0（不放大）、flex-shrink: 0（不缩小） -
calc(25% - 8px)中的8px是列间gap的一半（假设gap: 16px），确保总宽度不溢出 - 若用
gap属性，父容器必须设display: flex+flex-wrap: wrap，否则gap不生效
为什么用 % 计算 flex-basis 还是错位？
百分比值基于父容器宽度计算，但若父容器宽度本身受内容影响（如未设 width 或被 min-content 限制），结果就不稳定。更可靠的方式是结合 min-width + max-width 限定范围：
立即学习“前端免费学习笔记（深入）”；
.grid {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.grid > * {
flex: 0 0 25%;
min-width: 250px; /* 防止过小列塌陷 */
max-width: calc(25% - 16px);
}注意：max-width 要略小于 flex-basis，否则在窄屏下可能触发收缩（因 flex-shrink: 0 已禁用，实际靠 max-width 截断）。
移动端适配时列数变化导致错位怎么办？
不能只靠媒体查询重设 flex-basis 百分比，要同步调整 gap 和子项 margin。推荐用 CSS 自定义属性统一控制：
:root {
--col-count: 4;
--gap: 16px;
}
.grid {
--col-width: calc((100% - (var(--col-count) - 1) * var(--gap)) / var(--col-count));
display: flex;
flex-wrap: wrap;
gap: var(--gap);
}
.grid > * {
flex: 0 0 var(--col-width);
}
<p>@media (max-width: 768px) {
:root { --col-count: 2; }
}这样所有列宽、间隙、响应逻辑都由一个变量驱动，不易漏改。
真正麻烦的是内容高度差异大时的对齐问题——flex-basis 管宽度，不管高度；想顶部/底部对齐得额外加 align-items 或子项内 height: 100%，这点容易被忽略。
