最稳方案是左栏用 flex: 0 0 240px（等价于 flex-grow: 0; flex-shrink: 0; flex-basis: 240px）并配 box-sizing: border-box，右栏用 flex: 1；避免 width 百分比或 calc，小屏时改 flex-direction: column 实现堆叠。
左侧窄右侧宽用 flex: 0 0 240px + flex: 1 最稳
别写 width: 20% 或 width: calc(100% - 240px)，前者在小屏下可能窄到看不见导航文字，后者一加 padding/border 就错位。现代布局直接用 Flexbox，左栏固定基础宽度、禁伸缩，右栏自动占满剩余空间。
-
flex: 0 0 240px等价于flex-grow: 0; flex-shrink: 0; flex-basis: 240px，明确禁止压缩和拉伸，比只写width: 240px安全得多 - 必须配
box-sizing: border-box，否则 padding 和 border 会额外加宽左栏，导致右栏被挤出或出现横向滚动条 - 右栏用
flex: 1，不是width: 100%—— 后者在 flex 容器里无效，还可能触发意外换行 - 如果右栏内容含长英文单词或无空格 URL，加
word-break: break-word或overflow-wrap: break-word防溢出
百分比流式布局容易踩的坑：不是所有“百分比”都可靠
用 width: 20% + width: 80% 看似简单，但实际中几乎必出问题：父容器有 padding 时，子项总宽超 100%；字体放大后窄栏文字换行错乱；小屏下 20% 可能只剩 60px，图标和文字叠在一起。
- 百分比宽度依赖父容器实际宽度，而父容器宽度又受
padding、border、box-sizing影响，链式误差不可控 - 响应式断点里改百分比（比如从 20% → 100%）不如改
flex-direction: column直观，后者 DOM 顺序不变，可访问性友好 - 真要流式，建议左栏用
min-width: 220px; max-width: 280px; flex: 0 0 auto，右栏仍用flex: 1，让窄栏随内容弹性微调，而非硬卡百分比
小屏堆叠时，别只改 width，重点是 flex-direction
手机上左右变上下，关键不是隐藏左栏或重设宽度，而是让主轴方向翻转。只改 width 不改布局模型，会导致右栏被左栏遮盖或高度塌陷。
- 媒体查询里写
@media (max-width: 600px) { .container { flex-direction: column; } }，这是最轻量、语义最清的切换方式 - 别用
display: none隐藏左栏再显示右栏——SEO 和屏幕阅读器会跳过被隐藏的内容 - 堆叠后若右栏顶部留白异常，检查是否误设了
align-items: flex-start，竖排时它会让子项顶部对齐，但通常你想要的是默认的stretch或居中
Grid 方案适合严格比例控制，但别混用 float/flex
如果你明确需要“左 25% / 右 75%”这种比例，且不需兼容 IE，display: grid 比 flex 更直观。但它和 float、inline-block 不能共存，混用会直接失效。
- 写
grid-template-columns: 25% 75%或250px 1fr都可以，但子元素上不能再设float、display: inline-block或width - 加间隙统一用
gap: 1rem，别给子项加margin，否则网格轨道计算会被干扰 - IE11 仅支持旧版 Grid 语法（
display: -ms-grid），若项目还需兼容，优先降级为 flex 方案，别强行 polyfill
真正麻烦的不是写两栏，而是当右栏塞进一个没设 max-width: 100% 的广告图、或左栏用了 em 单位而字体缩放时突然撑开——这些细节不会报错，但上线后 QA 一眼就揪出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
