flex: 1 不等于均分剩余空间，它等价于 flex: 1 1 0，会将基准尺寸归零再分配；真正保留内容宽度并均分剩余空间应使用 flex: 1 1 auto。
flex: 1 不等于“均分剩余空间”
很多人一上来就给子元素写 flex: 1，结果发现宽度不均、文字被压扁、内容溢出——这不是代码写错了，而是误解了它的行为。它等价于 flex: 1 1 0，即 flex-basis: 0，强制把基准尺寸归零后再按 flex-grow 分配。如果子项本身有内容宽度（比如按钮文字），这个归零会直接抹掉原始尺寸，导致压缩。
真正想“保留内容宽度 + 均分剩余空间”，该用：flex: 1 1 auto。它先按内容渲染，再把剩下的空间按比例摊开。
-
flex: 1 1 0：适合填满空白区域（如主内容区占满侧边栏后的宽度） -
flex: 1 1 auto：适合按钮组、标签栏等需尊重文字长度的场景 -
flex: 0 0 auto：固定尺寸项（图标、头像），完全不参与伸缩
多个子项用 flex-grow: 1 就能均分？不一定
当所有子项都设 flex-grow: 1，它们确实会等比例拉伸，但前提是它们的 flex-basis 一致。如果一个子项写了 width: 200px，另一个没写，那前者实际 flex-basis 是 200px，后者是 auto（即内容宽度），最终分配就不均。
安全做法是统一显式声明 flex-basis：
- 横向均分：所有子项加
flex: 1 1 0或flex: 1 1 auto，并确保父容器display: flex - 纵向均分高度：父容器设
flex-direction: column，中间内容区用flex: 1占满剩余高度，其子项再设flex: 1或flex-grow: 1 - 避免混用
width/height和flex-basis，优先用后者控制基准尺寸
内容溢出或换行失败，大概率是 min-width 没关
Flex 子项默认有 min-width: auto（块级元素特性），遇到窄容器时宁可撑破也不缩小。比如一个 flex: 1 的 <div> 里放长 URL，它不会自动换行，而是水平滚动或溢出。
<p>解决方法很简单，但常被忽略：</p>
<ul>
<li>给需要收缩的子项加 <code>min-width: 0（注意不是 min-width: 0px，后者在某些旧版 Safari 不生效）
word-break: break-all 或 overflow-wrap: break-word 才能真正折行<span></span>），还要确认它是否被包裹在块级上下文中，否则 min-width: 0 无效justify-content: space-between 不是均分剩余空间
这个属性只影响主轴上的**间距分布**，不改变子项自身尺寸。比如三个按钮用 justify-content: space-between，两端对齐、中间留空，但按钮宽度还是各自内容宽度，没变宽也没均分。
要让它们视觉上“均宽”，必须让每个按钮具备伸缩能力：
- 父容器设
display: flex - 每个按钮设
flex: 1 1 auto（推荐）或flex: 1（若允许压缩内容） - 去掉按钮自身的
width或min-width干扰
真正容易被忽略的是 flex-basis 的隐式影响——它不写出来，但决定了分配起点；不设 min-width: 0，再好的 flex-grow 也卡在最小宽度上。
