width: 240px 不行，因其仅为盒模型初始宽度，在 flex 容器中仍受 flex-shrink 影响而被压缩；正确写法是 .sidebar { flex: 0 0 240px; } 锁死不放大、不缩小、基准宽 240px。
两栏布局：左侧固定、右侧自适应，为什么 width: 240px 不行？
直接给侧边栏设 width: 240px，再让主内容区写 flex: 1，看起来能跑，但一缩放或换 Safari 就错位——因为 width 只是“初始提示”，不是弹性约束。浏览器仍可能压缩它，尤其在 iOS 15.4 以下或高 DPI 屏像素舍入时。
✅ 正确写法必须用 flex 三元组锁死：
-
.sidebar { flex: 0 0 240px; }—— 不放大、不缩小、基准宽就是 240px -
.main { flex: 1; }—— 等价于flex: 1 1 0，从 0 开始分剩余空间，绕过内容最小宽度干扰 - IE10/11 必须补全：
.main { -ms-flex: 1; flex: 1; }，否则会塌成 0
三栏布局：左右固定、中间自适应，flex-grow: 1 为什么不如 flex: 1？
flex-grow: 1 单独写，等于没写。当中间栏里有图片、input、长英文或未设 white-space 的文本时，浏览器先按内容最小宽度（min-content）算基准，再分配增长空间，结果中间栏被撑宽甚至溢出。
flex: 1 才是真正解法，它等价于 flex-grow: 1; flex-shrink: 1; flex-basis: 0，关键在 flex-basis: 0——强制从零起点开始分配剩余空间。
- 左右栏必须都写
flex: 0 0 200px（可不同值，比如左240px、右160px） - 千万别给中间栏加
width: 100%或max-width: 100%，会和flex: 1冲突，行为不可预测 - 父容器必须有
display: flex，且高度链不能断（比如祖先有overflow: hidden但没设高，flex: 1就没空间可分）
移动端响应式：从三栏切到单列，只改 flex-direction: column 不够
很多人以为加个媒体查询把容器改成 flex-direction: column 就万事大吉，结果三栏堆叠后每栏高度不一致、文字压扁、留白过大——因为子项还带着原来的 flex: 1 和 flex: 0 0 200px，它们仍在按“行内逻辑”争空间。
✅ 必须同步重置子项的 flex 值：
- @media (max-width: 768px) {
.left, .center, .right { flex: none; }} - 或者更稳妥：
.left, .center, .right { flex: 0 0 100%; }，确保每栏独占一行 - 别用
visibility: hidden隐藏侧边栏，它仍占 flex 位置；要用display: none，flex: 1 的中间栏会立刻占满全宽
容易被忽略的两个隐形杀手：min-width 和 align-items
这两个属性平时不写，但一旦布局错乱，八成是它们在作怪。
min-width: auto 是 flex item 默认行为，它会让内容宽度成为最小限制——比如中间栏里有个长 URL，整个栏就被撑开。解决方案只有两个：flex: 0 0 N 锁死，或对自适应栏显式设 min-width: 0。
align-items 控制的是所有子项在交叉轴上的对齐，不是单个栏的定位。如果三栏高度不一致又没设 align-items: stretch（默认值），某栏就可能“塌陷”。但它不是用来居中某个栏的，别误用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
