用 display: flex 实现左右分栏最友好——无需清浮动、不依赖父高、默认对齐、改宽只动一处；float 易致塌陷、错位、文字环绕，需额外补救；flex 天然规避；左栏设 flex: 0 0 200px，右栏 flex: 1，父容器必加 display: flex，统一 box-sizing: border-box，语义标签提升可维护性。
用 display: flex 实现左右分栏，对新手最友好——不用清浮动、不依赖父容器高度、默认自动对齐、改宽度只动一个地方。
为什么别用 float 做左右分栏
float 在新手手里容易出三类问题：父容器塌陷（内容看不见）、右栏跑到底部（明明写了 width 却不并排）、文字环绕左栏（右栏里段落被顶到右边去）。这些都得靠 overflow: hidden 或额外加 <div class="clear"></div> 补救，但补救本身又引入新理解成本。
而 display: flex 天然规避这些问题：子元素默认在一行、父容器自动撑开、文字不会意外环绕。
- 左栏固定宽、右栏自适应：给左栏设
flex: 0 0 200px，右栏设flex: 1 - 必须给父容器加
display: flex，否则所有flex相关属性无效 - 别漏掉
box-sizing: border-box，否则 padding 会让实际宽度超预期
HTML 结构要语义清晰，别全用 div
新手常把所有区域都写成 <div>，结果后期改样式或加 JS 时找不到目标。HTML5 提供了明确语义的标签，直接用就行：<ul><li>导航菜单用 <code><nav></nav>，不是 <div class="nav">
<li>主体内容区用 <code><main></main>，左右分栏就包在里面
<aside></aside>，比 <div id="sidebar"> 更易被屏幕阅读器识别<li>头部和底部优先用 <code><header></header> 和 <footer></footer>
语义标签本身不影响布局，但配合 CSS 更易维护。比如想让整个 <main></main> 水平分栏，直接给它加 display: flex 就行，不用再找 class。
Flex 分栏常见宽度配置陷阱
新手写 width: 200px + flex: 1 看似合理，但实际会因 margin/padding/border 导致右栏溢出或换行。真正稳妥的写法是：
- 左栏用
flex: 0 0 200px（不缩放、不增长、固定 200px） - 右栏用
flex: 1，不是width: calc(100% - 200px)—— 后者在 flex 容器里反而失效 - 如果左右都有 padding，统一用
box-sizing: border-box，避免计算偏差 - 别给右栏设
width，它会和flex冲突，导致布局错乱
示例片段：
<main style="display: flex;"><aside style="flex: 0 0 240px; background: #f5f5f5;">侧边栏</aside><article style="flex: 1; background: #fff;">主内容区</article></main>
响应式断点下怎么让左右栏堆叠
手机屏上左右并排显然不合理，需要用媒体查询切换布局方向。关键不是“隐藏某栏”，而是让 flex 主轴从水平变垂直：
- 默认写
flex-direction: row（可省略，默认就是 row） - 在小屏下加
@media (max-width: 768px) { main { flex-direction: column; } } - 这样左右栏自动上下排列，且无需改 HTML 结构
- 如果侧边栏想在手机上收起，不要用
display: none，而是用order控制显示顺序，保持语义完整性
最容易被忽略的是：flex 容器的 height 不会自动继承父级，如果内容少，背景色可能只显半截。解决方法是给 <main></main> 加 min-height: calc(100vh - 120px)（减去 header + footer 高度），而不是死写 height: 100vh。
