最简写法是父容器设display: flex，左侧用width: 200px，右侧用flex: 1；需确保无float、absolute等干扰样式，且右侧加min-width: 0防溢出，兼容chrome 29+等现代浏览器。
用 display: flex 实现左固定右自适应最简写法
直接给父容器设 display: flex，左侧元素设固定 width，右侧用 flex: 1 即可撑满剩余空间——这是目前最可靠、语义最清晰的方案。
常见错误是给右侧也加 width: 100%，结果右侧溢出或换行；或者忘记移除 float 或 position: absolute 等干扰样式，导致 flex 不生效。
实操建议：
- 确保父容器没有
float、position: absolute或display: inline-block等会破坏 flex 上下文的设置 - 左侧元素不需要
flex-shrink: 0（默认就是 0），但若内容超长可能被压缩，此时显式加flex-shrink: 0更稳妥 - 右侧若需最小宽度限制，可用
min-width: 0防止内容溢出时撑破布局 - 兼容性：Chrome 29+、Firefox 28+、Safari 6.1+、Edge 12+，IE 10–11 仅支持旧版语法（
flex: 1需写成-ms-flex: 1）
用 display: grid 实现时必须明确列轨道
Grid 方案更直观，但容易漏掉关键声明：grid-template-columns 必须显式定义两列，否则不会自动“左定宽右自适应”。
典型错误是只写 display: grid 却不设列，结果两个子元素堆叠在第一列；或误用 fr 单位让左侧也参与弹性分配。
实操建议：
- 推荐写法：
grid-template-columns: 200px 1fr（左侧 200px 固定，右侧占满剩余） - 若需留间隙，用
gap: 16px，不要靠margin—— margin 在 grid item 上可能被忽略或行为不一致 - 右侧内容若含长文本，加
overflow-wrap: break-word和min-width: 0防止换行失效 - 兼容性：Chrome 57+、Firefox 52+、Safari 10.1+、Edge 16+；IE 完全不支持
Flex 与 Grid 在响应式切换时的关键差异
两者都能实现基础两栏，但响应式断点处理逻辑不同：Flex 依赖 flex-direction: column 切换流方向，Grid 则靠重定义 grid-template-columns。
容易被忽略的是：Flex 下 flex: 1 在 column 模式中失去意义（它只作用于主轴），而 Grid 的 1fr 在任意方向都保持“按比例分配剩余空间”的语义。
实操建议：
- 移动端优先项目，Grid 更易维护——一套
@media只需改一两行列定义 - 需支持 IE11？只能选 Flex，并配合
-ms-flex前缀和flex-basis显式控制 - 避免混用：不要在 flex 容器里给子元素设
grid-column，也不要在 grid 容器里对子元素用flex属性
右侧内容高度不同时的塌陷风险
无论 Flex 还是 Grid，当右侧内容高度远小于左侧时，父容器高度由左侧决定，但 footer 可能紧贴左侧底部、悬空在右侧上方——这不是布局失效，而是文档流自然表现。
这不是 bug，而是你没意识到「视觉对齐」需要额外控制。Flex 默认 align-items: stretch，Grid 默认 align-items: start，行为天然不同。
实操建议：
- 要右侧拉高对齐左侧：Flex 下加
align-items: stretch（默认值，通常已生效）；Grid 下需加align-items: stretch或给右侧设height: 100% - 要两侧各自按内容高度独立伸展：Flex 下用
align-items: flex-start；Grid 下保持默认即可 - 最常被跳过的一步：检查父容器是否设置了
min-height或height，否则高度计算可能受祖先影响
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
