用 display: flex + order 实现三栏布局，.main 应设 flex: 0 1 auto 和 min-width: 0，侧栏用 flex: 0 0 240px 或 width + flex-shrink: 0，移动端推荐切 column 布局并用 order 调序，<main> 必须在 HTML 中位于侧栏之前。
直接用 display: flex + order 就能实现，不需要负边距、浮动或 position: absolute——那些方案现在只会在维护时拖慢你。
为什么 flex: 1 会让中间栏塌缩成一条线
常见错误是给 .main 设 flex: 1，结果内容少时它直接缩成窄条，尤其左右栏较宽时更明显。这是因为 flex: 1 等价于 flex: 1 1 0%，浏览器按“从零宽度开始等比拉伸”计算，完全忽略内容实际尺寸。
-
.main应该用flex: 0 1 auto：不放大、允许收缩、基准宽度按内容自然宽度来 - 必须加
min-width: 0，否则内部长单词、图片或 inline 元素会撑宽整栏并溢出 - 别给
.main设width或max-width，会覆盖 flex 分配逻辑
侧栏为什么不能只写 width: 240px
在 flex 容器中，仅设 width 不足以锁定侧栏尺寸——小屏下仍可能被压缩，尤其当父容器空间紧张或存在 flex-shrink: 1（默认值）时。
- 左/右栏必须用
flex: 0 0 240px，显式禁用放大和收缩 - 或者用
width: 240px; flex-shrink: 0，效果等价但写法更直白 - 避免用
flex-basis单独设宽度，容易和flex-grow/flex-shrink产生意外交互
移动端隐藏侧栏后中间栏不占满？别用 display: none
直接对左右栏设 display: none，会导致 flex 容器子项数量变化，.main 的 flex: 0 1 auto 会按“剩余两个子项”重新分配空间，反而变窄。
立即学习“前端免费学习笔记（深入）”；
- 正确做法是用
visibility: hidden; width: 0; overflow: hidden，元素仍参与 flex 计算但不可见 - 更推荐主动切布局：在
@media (max-width: 768px)中设flex-direction: column，再配合order调整视觉顺序 - 切列布局时，
.main改为order: 1，.left和.right按需设order: 2/order: 3，避免焦点顺序混乱
HTML 中 <main> 必须放在最前
这不是“可选优化”，而是语义、SEO 和屏幕阅读器的硬性依据。用 order 只是让视觉上看起来居中，DOM 顺序没变——Tab 键焦点、querySelector、打印样式都严格按源码走。
-
<main>必须是<main></main>，且在 HTML 中排在<aside class="left">和<aside class="right">之前 - 别给
.main加tabindex试图“修复”焦点顺序，那会破坏可访问性逻辑 - 父容器高度必须可计算：加
min-height: 100vh，同时检查祖先是否用了transform或overflow: hidden截断高度传递
最容易被忽略的是 min-width: 0 和 DOM 顺序——前者一漏，flex 就失效；后者一错，可访问性和 SEO 就掉档。这两点不处理，其他都白搭。
