flex: 1 等价于 flex-grow: 1、flex-shrink: 1、flex-basis: 0%，它使元素初始尺寸归零后按比例分配剩余空间，而非在内容宽度基础上拉伸；flex-basis: 0% 是关键，区别于 flex: auto 的 auto 基准。
flex: 1 是 flex-grow、flex-shrink、flex-basis 的简写
它不是只设 flex-grow: 1，而是三者同时生效：flex-grow: 1、flex-shrink: 1、flex-basis: 0%。这个组合决定了元素“从零开始按比例抢空间”，而不是“在自身内容宽度基础上再拉伸”。
为什么 flex-basis: 0% 比 auto 更关键
常见误解是把 flex: 1 当成“自适应宽度”，其实真正起决定性作用的是 flex-basis: 0% —— 它让元素初始尺寸归零，所有空间都靠 flex-grow 分配。对比 flex: auto（即 flex: 1 1 auto）：
-
flex: 1：先清空内容宽度，再平分剩余空间 → 中间栏不会被文字撑宽，适合三栏布局 -
flex: auto：先取文字/图片原始宽度，再分配剩余空间 → 可能挤占左右固定栏 - 含长文本时，
flex: 1更稳定；含图标或短标签时，flex: auto更自然
flex: 1 和 flex: 1 1 0% 效果一样，但和 flex: 1 0 200px 完全不同
三值写法严格按顺序：第一个是 flex-grow，第二个是 flex-shrink，第三个是 flex-basis。省略时浏览器会补默认值，极易踩坑：
-
flex: 1→flex-grow: 1+flex-shrink: 1+flex-basis: 0% -
flex: 1 0 200px→flex-grow: 1+flex-shrink: 0+flex-basis: 200px（不收缩，且初始宽强制 200px） -
flex: 0→flex-grow: 0+flex-shrink: 1+flex-basis: 0%（不放大，但会压缩，容易文字溢出）
实际调试时最容易忽略的点
Flex 计算是两阶段的：先按 flex-basis（或 width）分配初始空间，再按 flex-grow/flex-shrink 调整。这意味着：
- 如果某子项写了
width: 300px，又设flex: 1，最终宽度取决于flex-basis和width谁优先 ——flex-basis优先级更高 - 父容器没设
width或height，子项设flex: 1可能“看不见”，因为没有可用空间可分配 - 在
flex-direction: column下，flex-basis控制的是高度，不是宽度
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
