flex-basis不能直接用百分比控制侧边栏比例，因其仅为初始主轴尺寸，最终宽度受flex-grow和flex-shrink共同影响；需组合flex: 0 1 240px（推荐像素值）冻结伸缩行为，主内容区设flex: 1。
Flex-basis 不能直接用百分比值控制侧边栏比例？
很多人以为给 flex-basis 设 30% 就能固定侧边栏占 30%，结果发现实际布局仍被内容撑开或压缩——这是因为 flex-basis 只是“初始主轴尺寸”，最终分配还受 flex-grow 和 flex-shrink 共同影响。纯靠 flex-basis 无法实现稳定比例，必须组合使用。
正确写法：用 flex: 0 1 X% 控制不可伸缩的侧边栏
要让侧边栏严格按比例占据空间（比如 240px 或 25%），同时主内容区自动填满剩余空间，关键在冻结侧边栏的伸缩行为：
-
flex-grow: 0→ 不放大（避免侵占主内容区） -
flex-shrink: 1→ 允许收缩（应对小屏幕） -
flex-basis: 240px或flex-basis: 25%→ 初始宽度基准
推荐写成简写：flex: 0 1 240px（比 25% 更可靠，因百分比在 flex 容器未设宽时可能失效）；主内容区用 flex: 1 即可。
为什么用 240px 比 25% 更稳？
当 flex 容器（如 或 <div class="layout">）没有显式设置 <code>width，其计算上下文不明确，flex-basis: 25% 可能解析为 0 或意外值。而像素值不依赖父容器宽度计算：
- 响应式场景下，可用媒体查询切换
flex-basis值：@media (max-width: 768px) { .sidebar { flex: 0 1 100%; } } - 若坚持用百分比，请确保父容器有明确宽度（如
width: 100vw或设display: flex的祖先已定宽） - Chrome DevTools 中检查 computed style，确认
flex-basis实际解析值是否符合预期
常见错误：flex-direction 和 min-width 导致比例失效
侧边栏突然“消失”或“换行”，往往不是 flex-basis 的问题，而是：
- 父容器漏写
display: flex或写成了inline-flex（后者对宽度约束更敏感） - 侧边栏内元素设置了
min-width: 100%或图片无max-width: 100%，强行撑开容器 -
flex-direction: column下误用水平方向的flex-basis（此时应作用于高度） - 使用了
white-space: nowrap+ 长文本，导致侧边栏无法收缩
调试时优先检查 computed 样式中 flex-basis 是否被覆盖，以及 min-width 是否隐式生效。
真正卡住的地方，往往不在 flex-basis 本身，而在它和 min-width、overflow、父容器尺寸推导之间的隐式耦合。每次改完记得在不同视口下手动拖拽窗口，看是否出现意外换行或滚动条。
