用 display: flex 实现左右结构最稳，但必须设对父容器 display: flex 和子项 flex: 0 0 200px（左栏）、flex: 1（右栏）；grid 更适合精确控列宽与响应式切换。
用 display: flex 实现左右结构最稳，但必须设对父容器和子项的 flex 属性
现代项目里，display: flex 是响应式左右结构的第一选择，它不脱离文档流、不需清除浮动、高度自动拉齐（默认 align-items: stretch）。但很多人只在父容器写 display: flex，却忘了子项的伸缩控制，结果右栏被内容撑窄、左栏被压缩、或窄屏下换行错乱。
关键点：
-
.container必须设display: flex，且不能有flex-direction: column干扰（除非你真要竖排） - 左栏固定宽：推荐
flex: 0 0 200px，比单纯width: 200px更安全——它同时禁用放大、缩小、基础尺寸为 200px，避免被flex: 1挤压 - 右栏自适应：用
flex: 1，不是flex: auto或flex-grow: 1单独写，后者缺flex-basis容易受内容宽度影响 - 如果右栏文字太少导致高度塌陷，给
.container加min-height: 100vh，别依赖子项 height: 100%
用 display: grid 控制列宽更精确，但注意 1fr 不是百分比
grid-template-columns: 200px 1fr 是比 flex 更“声明式”的写法，尤其适合未来可能加间隙、变三栏、或需要列宽比例稳定的场景。但新手常误以为 1fr = “剩下所有宽度的 100%”，其实它是按可用空间均分的弹性单位，和百分比行为不同。
常见误区：
- 写了
grid-template-columns: 200px 80%—— 错，grid 不支持百分比混用固定值，会整个声明失效 - 给右栏加
width: 100%—— 多余，grid 子项默认填满轨道，再设 width 可能触发溢出 - 没删掉旧的
float或display: inline-block样式，导致 grid 布局被干扰 - 想留间隙？直接用
gap: 12px，别在子项上加 margin，否则 gap 和 margin 叠加错位
响应式切换时，别硬切 flex-direction，优先改列定义
移动端通常要把左右结构变成上下堆叠，很多人第一反应是 @media (max-width: 768px) { .container { flex-direction: column; } }。这能跑通，但问题在于：左栏固定宽（如 200px）在竖排时仍占整行宽度，白浪费空间；而且 column 模式下，flex: 1 对右栏高度的控制变得不可靠。
更干净的做法是用 grid 配合媒体查询：
@media (max-width: 768px) {
.container {
grid-template-columns: 1fr;
}
}
这样左栏和右栏都变成单列铺满，无需额外重置宽度或 margin。若坚持用 flex，则建议：
- 左栏加
flex-basis: auto或width: auto，让它在 column 下不固宽 - 右栏加
margin-top: 12px替代原 gap，因为 flex-direction: column 下 gap 不如 grid 稳定 - 避免在 column 模式下还依赖
flex: 1控制高度——它此时作用于高度方向，容易和 min-height 冲突
IE 兼容不是全有或全无，得看真实用户占比
如果你的项目真实用户里还有 IE10–11，display: flex 要加 -ms-flex 前缀，但 IE9 及以下完全不识别，这时候 fallback 方案不是“退回 float”，而是判断是否值得支持——多数 2026 年的业务已可明确声明不兼容 IE9 及以下。
如果真要兜底：
- 别用
calc(100% - 200px)：它不响应 DOM 变化，嵌套一层就失效，且 + / - 两侧少空格直接被忽略 - float 方案必须同步处理三件事：左栏设
float: left+ 明确width；右栏用margin-left让位（值 ≥ 左栏总宽，含 padding/border）；父容器用伪元素清除浮动，不用overflow: hidden - 所有方案里，左右栏默认都不等高——这是正常表现，不是 bug。想拉齐？只有 flex 或 grid 的默认 stretch 行为能做到，float 下只能 JS 计算或 JS 插件补
实际项目中，最容易被忽略的是：左侧导航栏折叠后宽度变化，flex: 0 0 200px 会卡死，这时得配合 JS 切换 class 改成 flex: 0 0 60px，或者直接上 CSS 变量 + flex: 0 0 var(--sidebar-width)。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
