用flex实现两栏自适应最稳：父容器设display: flex和min-height，左侧用flex: 0 0 宽度固定，右侧用flex: 1撑满剩余空间，响应式用flex-direction: column切换，避免float和table布局。
用 flex 实现两栏自适应，别碰 float 和 table
初学者最容易卡在“左边固定宽度、右边自动撑满”这种布局上。直接上 flex 最稳，浏览器兼容性从 Chrome 29 / Firefox 28 开始就完全支持，移动端也没问题。别被老教程带偏去用 float 清除浮动，或者更糟的 table 布局——它们不是“能用”，而是“用了就得花额外时间修 bug”。
关键点：display: flex 写在父容器上，子元素用 flex 相关属性控制分配逻辑：
-
flex: 0 0 200px表示左侧栏不缩放、不增长、固定宽 200px -
flex: 1表示右侧栏占剩余全部空间，且会随窗口缩放自动调整 - 必须给父容器设
height（比如min-height: 100vh），否则高度塌陷，内容可能看不见
HTML 结构只要三行，但 class 名不能乱起
结构越简单，后期改起来越快。别写 <div class="left-column-wrapper"> 这种嵌套三层还带下划线的 class 名——初学者记不住，也容易拼错。用语义清晰、简短的名：
<div class="layout"> <aside class="sidebar">菜单</aside> <main class="content">正文</main> </div>
对应 CSS 只需：
立即学习“前端免费学习笔记（深入）”；
.layout { display: flex; min-height: 100vh; }
.sidebar { flex: 0 0 240px; background: #f5f5f5; }
.content { flex: 1; padding: 1rem; }
注意：aside 和 main 是语义化标签，对 SEO 和屏幕阅读器友好，不是“可有可无”的装饰。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
响应式断点加在哪？加在 flex-direction 上
手机屏上两栏并排显然不合理。别试图用媒体查询去改每个栏的宽度，直接把布局方向从横向改成纵向：
@media (max-width: 768px) {
.layout { flex-direction: column; }
.sidebar { flex: none; width: 100%; }
.content { flex: none; width: 100%; }
}
这里的关键是：flex-direction: column 一加，所有子元素自动垂直堆叠，不需要重写宽度或 margin。很多初学者在媒体查询里反复调 width 和 float，结果桌面和移动端样式互相打架。
补充一个实用细节：如果希望小屏时隐藏侧边栏（比如用汉堡菜单触发），就把 .sidebar 的 display 改成 none，而不是删 DOM 或靠 JS 控制 visibility —— 更轻量、更可靠。
为什么不用 CSS Grid？它更适合三栏以上或复杂网格
grid 确实强大，但对纯两栏自适应来说属于“杀鸡用牛刀”。初学者写 grid-template-columns: 240px 1fr 虽然也能跑通，但一旦加响应式、加滚动区域、加 sticky 头部，就会频繁遇到 grid-area 错位、minmax() 行为反直觉、或者 IE 兼容性陷阱（哪怕现在没人用 IE，团队里总有老项目要维护）。
而 flex 在这个场景下边界清晰：只管一行或一列的分配，逻辑线性，出错时 console 里几乎看不到 layout 相关 warning。真遇到需要网格对齐（比如卡片列表），再学 grid 不迟。
真正容易被忽略的是：所有 flex 子项默认 align-items: stretch，如果你发现文字上下不对齐，不是 height 没设对，而是该加 align-items: flex-start 到父容器上——这个细节，查 MDN 都得翻两页才能找到。
