正确做法是html中必须置于最前，再用order:-1/0/1控制视觉顺序；flex:1需配合min-height:100vh且中间栏应设flex:0 1 auto，侧栏用flex:0 0 240px而非width，响应式改flex-direction:column而非重置order。
直接用 display: flex + order 就能实现，不需要负边距、浮动或绝对定位——这是 2026 年标准做法，且语义和可访问性有保障。
为什么不能只靠 flex: 1 让中间栏撑满
常见错误是给 .main 设 flex: 1 后发现它没占满，甚至塌缩成一条线。这是因为 flex: 1 等价于 flex: 1 1 0%，flex-basis 为 0% 时，浏览器会按比例瓜分剩余空间，而忽略内容实际宽度。
-
.main应设flex: 0 1 auto：先按内容宽度展开，再允许收缩（不放大） -
.left和.right必须显式控制尺寸：flex: 0 0 240px，不能只写width: 240px（在 flex 容器中可能被忽略） - 父容器需有明确高度参照，否则
flex-grow无从生效：加min-height: 100vh或继承自html, body { height: 100%; }
order 只改视觉顺序，不改 DOM 顺序
很多人以为设 order: -1 就能让左栏“真正排在前面”，但实际 DOM 位置不变——键盘 Tab、屏幕阅读器、打印样式仍按 HTML 源码顺序走。
- HTML 结构必须是：
<main></main>→<aside class="left"></aside>→<aside class="right"></aside>（语义优先） -
.left { order: -1; }让它视觉上跑到最左，.main { order: 0; }居中，.right { order: 1; }在最右 - 避免用大数字如
order: 99，响应式断点切换时容易冲突；推荐用-1 / 0 / 1这类小整数 -
position: absolute元素完全不响应order，因为它已脱离 flex 流
移动端适配时别硬切 order，改用 flex-direction: column
小屏下想让 .main 在顶部、.left 在中间、.right 在底部？别在媒体查询里反复重置 order 值——这会触发重排，iOS Safari 容易卡顿，且焦点顺序依然混乱。
- 直接在
@media (max-width: 768px)中设.container { flex-direction: column; } - 此时三栏自然堆叠，
order失去意义，也不再需要维护多套顺序逻辑 - 如果要隐藏侧栏，用
display: none会导致.main的flex: 1重新分配全部宽度（变窄），更稳妥的是visibility: hidden; width: 0; flex: 0 0 0;
真正容易被忽略的，不是怎么写 CSS，而是 HTML 结构是否真把 <main></main> 放在最前——视觉对了，语义错了，搜索引擎和辅助技术照样判低质。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
