flex: 1 不均分是因子项存在 width/min-width 或内容撑开，其本质 flex: 1 1 0% 中 flex-basis 为 0% 才能均分；需设 flex: 1 1 0、清除非 auto 宽度、用 gap 控制间隙。
flex: 1 为什么有时不均分？
直接写 flex: 1 看似简单，但常出现子项宽度不一致——尤其当子项本身有 width、min-width 或内容撑开时，flex: 1 会被压制。它本质是 flex: 1 1 0%，第三个值（flex-basis）为 0% 才能真正从零开始均分；若子项自带固定宽（比如 width: 200px），浏览器会优先尊重该宽度，导致 flex 分配失效。
- 确保父容器设了
display: flex，且无flex-wrap: wrap干扰单行布局 - 子项显式重置
flex-basis：用flex: 1 1 0或flex-basis: 0（推荐前者，更简洁） - 清除子项可能存在的
width、min-width、max-width，或设为auto - 避免子项内联元素（如文字）过长导致换行挤压，可加
white-space: nowrap控制
多个子项等宽但要留间隙怎么办？
用 gap 最干净。它不会影响 flex 分配逻辑，也不会触发 margin 合并或额外计算；而用 margin 加间隙容易让最后一项多出空白，或因 box-sizing 不一致导致实际宽度溢出。
-
gap在 Flex 布局中完全支持（Chrome 84+、Firefox 63+、Safari 14.1+），现代项目可放心用 - 若需兼容老版本 Safari（margin-right +
:last-child重置，但必须配合flex-basis: 0防止 margin 参与 flex 计算 - 不要对子项设
padding来模拟间隙——这会改变内容区尺寸，影响对齐和文字垂直居中
子项内容高度不一，怎么保持顶部对齐？
默认 align-items: stretch 会让所有子项拉满父容器高度，掩盖内容差异；要对齐顶部，必须显式设 align-items: flex-start。注意这不是子项自己的属性，而是父容器的 flex 容器属性。
- 父容器加
align-items: flex-start即可，无需每个子项单独处理 - 如果子项内部文字需要垂直居中，应在子项内用
display: flex; align-items: center，而不是依赖容器拉伸 - 慎用
align-items: baseline——字体行高、vertical-align等细微差异会让基线对齐看起来“错位”
flex: 1 在 Grid 容器里也管用吗？
不管用。flex 是 Flexbox 的专属属性，在 Grid 容器中写 flex: 1 完全无效。Grid 有自己的均分逻辑，靠 grid-template-columns: repeat(auto-fit, minmax(0, 1fr)))) 或直接 1fr 1fr 1fr 实现等宽。
- 别在 Grid 子项上写
flex相关声明，CSS 解析器会忽略它们 - 如果布局既想用 Grid 又想保留部分 Flex 行为，可在 Grid 子项内部再套一层
display: flex容器 - 混合使用时注意层叠顺序：Grid 控制整体网格轨道，Flex 控制子项内部排列，职责分明
flex 均分看着简单，真正卡住人的往往是 flex-basis 的隐式值、子项固有尺寸干扰，还有跨布局体系（Flex/Grid）的属性误用。调的时候先看 computed styles 里 flex-basis 算出来是多少，比猜快得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
