推荐用display: flex实现左右分栏：父容器设display: flex，左栏flex: 0 0 240px，右栏flex: 1并加min-width: 300px和overflow-wrap: break-word，小屏用flex-direction: column切换。
直接用 display: flex 或 display: grid 控制比例，别碰 float、frameset 或百分比硬编码——前者语义清晰、响应式友好、浏览器兼容到 IE10+；后者已废弃且无法 SEO。
flex 实现左 240px / 右自适应的稳定写法
这是后台管理系统最常用的结构：左侧导航固定宽，右侧内容区随窗口缩放。关键不是“怎么设比例”，而是“怎么防压缩、防溢出、防塌陷”。
- 父容器必须加
display: flex，漏掉这句整个布局就失效 - 左栏写
flex: 0 0 240px（不伸缩、不收缩、宽固定），比只写width: 240px更稳——避免内容多时被flex-shrink挤变形 - 右栏写
flex: 1，它会吃掉所有剩余空间；若怕小屏下太窄，加min-width: 300px - 别在右栏上同时写
width和flex，二者冲突，flex优先级更高 - 默认
align-items: stretch就能让两栏等高，但如果用了 CSS 重置库（比如 normalize.css），可能被覆盖，需手动检查
grid 实现精确列比（如 25% / 75% 或 200px / 1fr）
适合需要强控制力的场景：比如三栏扩展预留、带间隙的仪表盘、或列宽需严格匹配设计稿。注意 fr 不是百分比，它按剩余空间分配，不受内容宽度影响。
- 父容器设
display: grid，列定义用grid-template-columns: 200px 1fr（左固定、右弹性）或25% 75%（仅当需绝对比例且无响应需求时） - 加
gap: 12px直接控制列间距，不用在子元素上写margin - 子元素无需任何
float、width或flex，Grid 自动按轨道分配位置 - 如果旧项目残留了
float: left或display: inline-block，必须删掉，否则会干扰 Grid 布局
响应式切换时 flex-direction: column 的坑
移动端把左右变上下，不是“隐藏一栏”，而是靠 flex-direction: column 切换主轴方向。但很多开发者忽略对齐方式变化带来的错位。
立即学习“前端免费学习笔记（深入）”；
- 水平排布时常用
align-items: flex-start，竖排后若想让内容居中，得显式加align-items: center或保持stretch - 右栏如果是广告图或卡片，竖排后可能撑高页面，加
max-width: 100%和height: auto保比例 - 别在子元素上写
width: 100%“强行适配”，Flex 容器里宽度由flex分配，硬写反而破坏流式行为 - HTML 结构顺序很重要：主内容
<main></main>在前、侧边栏<aside></aside>在后，这样竖排时 DOM 流仍符合阅读逻辑
真正难的不是写对那几行 CSS，而是理解「比例」背后的真实约束：固定值要不要加 min-width 防压缩？fr 单位在嵌套 grid 中会不会被意外截断？flex 容器有没有被父级的 overflow: hidden 切掉滚动条？这些细节往往在上线前最后一刻才暴露。
