flex: 1 不均分是因为其等价于 flex: 1 1 auto，flex-basis: auto 使浏览器先按内容宽度定初始尺寸，再分配剩余空间，导致起点不一致；需显式设 flex: 1 1 0 并配合 min-width: 0 才能真正等宽。
flex: 1 为什么有时不均分？
写了 flex: 1 却发现子元素宽度/高度不一致，不是浏览器 bug，而是 flex-basis 默认为 auto —— 浏览器先按内容撑开，再把“剩余空间”（容器尺寸减去内容总宽）平分。文字多的项初始就宽，最终还是更宽。
- 显式写
flex: 1 1 0px或flex: 1 1 0%，强制所有项起始主轴尺寸为 0 - 避免只写
flex: 1，它在不同浏览器中可能解析为0%或auto，行为不稳 - 若子元素含
min-width（比如按钮、输入框），它会压制flex-basis: 0，需同步重置min-width: 0
justify-content: space-evenly 为何没效果？
space-evenly 要生效，前提是主轴上有“剩余空间”可分。常见失效场景比写错 CSS 还多：
- 子元素总宽 ≥ 容器宽 → 触发换行，
flex-wrap: wrap下space-evenly只对**单行内**计算，多行时各行间隙不一致 - 子元素是
<span></span>或<a></a>等 inline 元素 → 默认不参与 flex 布局，得加display: block或display: flex - 父容器
display被覆盖 → 比如被float、position: absolute或inline干扰 - 存在
display: none的子元素 → 它仍参与justify-content计算，但不占视觉空间，导致间隙错位
多行 Flex 下怎么真正均分？
一旦换行，justify-content 就不可靠了。真要多行下视觉均匀，别硬扛 space-evenly：
- 用
justify-content: center+ 所有子项统一设margin-inline: 16px，再配合:first-child和:last-child清除首尾外边距 - 直接切到
display: grid，写grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))+gap: 16px，语义清晰且 gap 不受换行影响 - 如果必须用 Flex，可在 JS 层监听
resize动态重算每行子项数并手动设置flex-basis，但成本高、易出错
gap 比 margin 更适合控制等分间距
用 margin 控制子项间距，容易和 justify-content 的间隙叠加，而且末项清除麻烦；gap 是专为 Flex/Grid 设计的间距控制属性，不干扰 flex 分配逻辑：
-
gap只作用于项目之间，不作用于容器边缘，不会破坏space-between的“首尾贴边”语义 - 写
gap: 12px后，所有子项自动获得统一间隔，无需:last-child { margin-right: 0 }这类补丁 - IE11 不支持
gap，但现代项目基本已无此顾虑；若需兼容，可用margin+calc()配合flex-basis手动模拟
min-width 和 white-space 行为。哪怕你把 flex-basis 设成 0，一个带长单词的 <p></p> 仍会撑开整行——这时得加 min-width: 0 和 overflow-wrap: break-word 才能真正交出控制权。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
