子元素尺寸不一致源于未显式控制flex-grow/shrink，默认行为导致浏览器自动分配；应设flex:1或指定grow/shrink值，并用min-width:0防内容撑开，关键控件设flex-shrink:0防压缩。
子元素尺寸不一致，通常是因为默认的 flex-grow 和 flex-shrink 行为未显式控制，导致浏览器按内容或剩余空间自动分配。解决核心是明确设置伸缩比例，而非依赖默认值。
理解 flex-grow 和 flex-shrink 的实际作用
flex-grow 决定元素在有剩余空间时“能分多少”，值为数字（如 1、2），代表相对比例；flex-shrink 控制空间不足时“愿缩多少”，默认为 1，值越大越优先缩小。两者都作用于主轴方向，且仅在 flex 容器中生效。
- 未设
flex-grow时，默认为 0，即不放大——即使有空余空间也不扩张 - 未设
flex-shrink时，默认为 1，但若子项内容宽（如长文本、图片），仍可能溢出容器 -
flex: 1是简写，等价于flex: 1 1 0（grow=1, shrink=1, basis=0），常用于均分空间
让子元素按比例分配宽度（推荐做法）
当希望几个子项按 2:1:1 占据主轴空间，直接用 flex-grow 设定数值比即可，无需计算具体像素：
.container { display: flex; }
.item1 { flex-grow: 2; }
.item2,
.item3 { flex-grow: 1; }
此时三者宽度比 ≈ 2:1:1（忽略内容最小宽度影响）。若想彻底忽略原始内容尺寸，可加 min-width: 0 防止文本撑开。
立即学习“前端免费学习笔记（深入）”；
防止子元素被过度压缩（收缩控制）
当容器窄、子项多时，flex-shrink 默认为 1，容易把按钮、图标等压扁。可针对性设置：
- 关键控件（如提交按钮）设
flex-shrink: 0，禁止压缩 - 文字区域设
flex-shrink: 1或更高，允许换行或截断 - 配合
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;处理超长文本
避免常见陷阱：flex-basis 的影响
flex-basis（第三个 flex 参数）是分配前的“基准尺寸”，它会影响最终比例。例如：
-
flex: 1→flex-basis: 0，从零开始按比例分剩余空间，结果最可控 -
flex: 1 1 auto→ 基准为内容宽度，可能导致比例失真（如一个子项文字多，起始就宽） - 统一用
flex: 1或显式写flex: 1 1 0，能更好实现预期比例
