flex属性控制flex-grow、flex-shrink和flex-basis三个值，顺序固定不可颠倒；其中flex: 1等价于flex: 1 1 0%，会忽略内容宽度导致换行或溢出问题。
flex 属性到底控制哪几个值
flex 是 flex-grow、flex-shrink 和 flex-basis 的简写。它不只影响“是否拉伸”，还决定元素在主轴上的初始尺寸和压缩行为。三者顺序固定，不能颠倒。
常见 flex 值的含义与陷阱
最常写的 flex: 1 实际等价于 flex: 1 1 0%（注意不是 0px），这会导致子项按比例分配剩余空间，但基础大小为 0% —— 也就是忽略自身内容宽度，强行从零开始拉伸。很多布局错乱就源于此。
-
flex: 1→flex-grow: 1; flex-shrink: 1; flex-basis: 0% -
flex: auto→flex-grow: 1; flex-shrink: 1; flex-basis: auto（尊重内容宽度） -
flex: none→flex-grow: 0; flex-shrink: 0; flex-basis: auto（完全不伸缩） -
flex: 0 0 200px→ 不增长、不缩小、基础宽固定为200px
为什么 flex: 1 会让文字换行或溢出
当父容器是 display: flex，子项设 flex: 1，而该子项内有长单词或无空格文本时，flex-basis: 0% 会压制内容自然宽度，导致浏览器优先满足“拉伸到剩余空间”，再尝试折行。若内容不可折（如 white-space: nowrap），就会溢出或撑破容器。
div {
display: flex;
}
.item {
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
此时需显式设 flex-basis 或改用 flex: auto，否则 text-overflow 失效。
立即学习“前端免费学习笔记（深入）”；
推荐写法：按场景选而非硬套 flex: 1
多数“均分”需求其实不需要 flex: 1。更安全的做法是：
- 想均分剩余空间且允许内容收缩 →
flex: 1 1 auto - 想均分但保留最小内容宽度 →
flex: 1 1 min-content（注意兼容性） - 纯内容自适应，不参与伸缩 →
flex: none - 仅允许放大、禁止缩小（如按钮组中最后一个按钮）→
flex: 1 0 auto
真正要小心的是 flex: 1 的隐式 0%，它在响应式或含内联元素的布局里最容易暴露问题。
