手写两栏布局首选flex，因其兼容性好、代码简洁且防错性强；grid语义清晰但手写易错；float和absolute因维护性差应避免。
现代面试中，手写两栏布局已不是考“能不能实现”，而是考“会不会避开典型坑”——flex 是唯一推荐现场手写的方案，grid 可提但不建议手写（容易漏 display: grid 或写错 grid-template-columns 位置），float 和 position: absolute 写出来基本等于主动扣分。
为什么手写 flex 最稳妥
它在 IE10+ 全平台一致，三行 CSS 就能跑通，且逻辑直觉匹配“左固定、右自适应”的题干要求。关键不是写对，而是写得防错。
-
.container { display: flex; }必须写，漏掉就全崩；别信“默认是 flex”，没设display就是普通块级流 -
.left { flex: 0 0 200px; }比width: 200px更安全：防止内容撑宽或被压缩（flex-shrink: 0是重点） -
.right { flex: 1; }等价于flex: 1 1 0，自动填剩余空间；若面试官追问“最小宽度怎么加”，补一句min-width: 300px即可 - 必须加
box-sizing: border-box到左右栏——否则边框/内边距会让实际宽度超 200px，右侧被挤窄甚至换行
grid 手写容易在哪卡住
它语义清晰，但手写时出错率高，不是不会，而是细节太脆。
-
grid-template-columns: 200px 1fr必须写在父容器上，写到子元素里无效；常见错误是顺手写成.right { grid-column: 2; }——这属于“用 grid 做 flex 的事”，反而暴露不熟 -
1fr不是百分比，是“剩余空间的一份”；IE11 不支持fr，若面试官问兼容性，得立刻接上降级方案：grid-template-columns: 200px calc(100% - 200px) - 子项默认不继承父容器宽度，所以千万别给
.right加width: 100%——双重要求会冲突，导致右栏错位或溢出 - 若右侧内容短、左侧长，
align-items: stretch（默认值）会被重置样式覆盖，结果左栏拉不高；现场可加align-items: stretch显式保底
为什么别碰 float 和 position
不是不能实现，而是它们暴露的不是能力，是维护意识缺失。
-
float必须清除浮动，但手写overflow: hidden有风险：如果右栏里有box-shadow或position: absolute子元素，会被裁掉——调试时极难定位 - 用伪元素清除（
::after { content: ""; display: table; clear: both; }）虽更稳，但面试手写 5 行 CSS 已显冗长，不如直接上flex -
position: absolute要求父容器先设position: relative，漏一个就错位；而且右栏用left: 200px; right: 0;时，若内容高度突增，滚动区域可能异常，响应式也几乎无法适配 - 所有这些方案里，最常被忽略的是：**左栏不会随右栏自动等高**——这不是 bug，是默认行为；要等高，
flex靠align-items: stretch，grid靠align-content: stretch，但面试手写时没人会主动加，得你点破才显得懂
真正拉开差距的，不是写出能跑的代码，而是写完立刻补一句：“如果右栏含长英文无空格，得加 word-break: break-word，否则会溢出容器”——这种细节，才是面试官想听的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
