flex: 1 1 0 是内容驱动自适应的核心，即 flex-grow: 1、flex-shrink: 1、flex-basis: 0，强制丢弃内容原始宽度，使空间分配完全由 flex-grow 主导；需配合 min-width: 0 才能触发 text-overflow: ellipsis，且 ie11 需用 -ms-flex 兼容。
flex: 1 1 0 是内容驱动自适应的核心
只写 flex: 1 看似能撑满，但浏览器会先按元素的固有宽度（比如文字长度、图片尺寸）占位，再拉伸——这导致中间区域实际宽度不可控，尤其在窄容器中会挤压两侧。真正“内容驱动”的自适应，是指：**无论内容多长或多短，都从零基准开始分配空间**。必须显式写 flex: 1 1 0，即 flex-grow: 1、flex-shrink: 1、flex-basis: 0。
常见错误现象：text-overflow: ellipsis 不生效 → 实际是中间元素被内容撑开，没留出压缩余地；修复后加 min-width: 0 才能触发截断逻辑。
-
flex-basis: 0强制丢弃内容原始宽度，让分配完全由 flex-grow 主导 - 若中间含长 URL 或未换行文本，必须额外加
min-width: 0，否则浏览器默认按min-content限制最小宽度 - IE11 不识别
flex: 1 1 0，需拆解为-ms-flex: 1 1 0+display: -ms-flexbox
两侧固定宽元素不能只靠 width: 200px
在 flex 容器里，width 只是初始建议值，默认 flex-shrink: 1 会让它被压缩。哪怕你写了 width: 80px，只要容器变窄，按钮或图标就会被压扁甚至消失。
- 正确写法是
flex: 0 0 80px（等价于flex-grow: 0; flex-shrink: 0; flex-basis: 80px） - 若两侧含文字，需加
white-space: nowrap; overflow: hidden; text-overflow: ellipsis防撑开 - 避免用
flex: 0 0 auto—— “auto” 仍会随文字变长，失去固定感
父容器和子项的 box-sizing 必须统一
如果卡片或容器设了 padding，又没设 box-sizing: border-box，那 flex-basis 计算时会把 padding 排除在外，导致视觉宽度与预期不符，尤其在响应式缩放时错位明显。
- 全局重置：
* { box-sizing: border-box; } - 不推荐用
calc(100% - 32px)手动减去 padding —— flex 不认这个，且媒体查询切换时易失效 - gap 比 margin 更安全，但 gap 和 padding 不冲突，可共存；只是 gap 不影响 flex-basis 计算
别用 justify-content: space-between 替代 flex 分配
有人把左右设固定宽、中间设 width: auto，再靠 justify-content: space-between “看起来居中”。这本质是视觉欺骗：中间元素仍是内容宽度，不会随容器缩放，文字一多就溢出或换行，且无法响应横竖屏切换。
- 真正的自适应必须依赖 flex 的空间分配机制，不是对齐机制
-
justify-content只控制剩余空间的分布方式，不参与宽度计算 - 一旦启用
flex-wrap: wrap，space-between行为会进一步失真，中间元素可能跳到下一行
最容易被忽略的是容器最小总宽约束：当三者最小宽度之和（如左 80px + 中间文字最小宽 120px + 右 80px）超过视口宽度时，即使写了 flex: 1 1 0，浏览器也会优先保内容，而非强行压缩。这时得靠 min-width: 0 + overflow: hidden 主动放弃部分内容，而不是指望 flex 自动兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
