现代网页左右分栏应优先使用display: flex或grid，避免float；flex需设container为flex且.left加flex-shrink:0和min-width，.right仅用flex:1；grid需显式定义grid-template-columns如200px 1fr；拖拽调整需.left同时满足resize:horizontal、overflow:hidden、flex-shrink:0及min-width；响应式堆叠用@media改flex-direction:column或grid-template-columns:1fr。
现代网页左右分栏，直接用 display: flex 或 display: grid，别碰 float —— 除非你真要兼容 IE8。
flex 实现左固定右自适应最简写法
这是日常开发中最常用、最不容易出错的方案。关键不是“怎么写”，而是哪些地方一动就崩。
-
.container必须设display: flex，不能只靠子元素 float 或 inline-block -
.left要加flex-shrink: 0，否则窄屏下会被压缩到文字挤成一团；width: 200px可以，但更推荐min-width: 200px配合flex-shrink: 0 -
.right只设flex: 1，**不要**再写width: 100%或flex-basis—— 会和flex冲突，导致宽度计算异常 - 如果父容器高度不确定，
.right内容可能撑不开，建议加min-height: 0防止 flex item 最小高度干扰布局
grid 实现左右分栏时 grid-template-columns 必须显式写
只写 display: grid 不会自动分两栏 —— 浏览器默认建一列，所有子元素全堆在第一列里，视觉上完全看不出变化。
- 正确写法：
grid-template-columns: 200px 1fr（左栏固定 200px，右栏占剩余空间） -
1fr不是百分比，也不是像素，它依赖容器剩余空间；写成auto 1fr会让左栏由内容撑开，适合按钮或图标栏 - 别给子元素设
width: 100%，这会破坏轨道分配，可能导致溢出或换行 - 留间隙用
gap: 1rem，比给子元素加margin更安全——gap作用于网格线之间，不侵占轨道宽度
需要拖拽调整栏宽？resize: horizontal 有硬性前提
原生拖拽最简实现，但漏掉任意一个条件就完全没反应。
-
.left必须同时满足：resize: horizontaloverflow: hidden（或auto/scroll）flex-shrink: 0（否则拖完松手瞬间被 flex 压缩回去）min-width（比如min-width: 200px） - 父容器不能设
width: 100%，会干扰 resize 的尺寸计算 -
resize不触发 DOM 尺寸事件，JS 想响应拖拽结果，必须用ResizeObserver监听.left的contentRect.width，别用offsetWidth—— 它在回调里可能未同步更新
响应式堆叠为单列只需一行媒体查询
移动端不需要左右并排时，别重写 HTML 结构，也别用 JS 切换 class —— flex 和 grid 天然支持主轴方向切换。
- 对
.container加媒体查询：@media (max-width: 768px) { flex-direction: column; } - 如果用了 grid，改
grid-template-columns: 1fr即可，甚至可以配合grid-auto-flow: row确保顺序 - 注意：
flex-direction: column后，原来flex: 1的右栏会自动占满高度，如需限制高度得额外加max-height或overflow
真正容易被忽略的点是：flex 和 grid 的行为差异藏在细节里 —— 比如 flex-shrink: 0 在 flex 中管用，在 grid 里无效；1fr 在 grid 里合法，在普通 width 里写就是废代码；resize 看似简单，但 overflow 和 flex-shrink 缺一不可。写完别只看大屏，一定要拉窄浏览器窗口、检查文字是否换行、拖拽后内容是否重绘、小屏下是否真堆叠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
