HTML源码顺序决定语义和可访问性，order仅调整视觉顺序；主内容必须在HTML中前置，再用order配合flex-grow实现左中右布局。
order 属性只能调视觉顺序，不能改语义或 DOM 位置——主内容必须写在 HTML 最前面，否则 order 再怎么调都是错的。
为什么 order 调了却还是左中右不对？
因为 order 不改变 HTML 源码顺序，只影响渲染层的视觉排列。如果 HTML 里是 <div class="left"></div>
<div class="main"></div>
<div class="right"></div>，那无论给 .main 设 order: -1 还是 order: 0，它在 DOM 树里仍是第二个节点，屏幕阅读器、SEO、键盘 tab 顺序都按这个来。
真正要的是“主内容语义优先 + 视觉居中”，所以 HTML 必须写成：
<div class="container"> <main class="main">主内容</main> <aside class="left">左栏</aside> <aside class="right">右栏</aside> </div>
然后才用 order 把 .left 拉到最左、.right 拉到最右。
立即学习“前端免费学习笔记（深入）”；
-
.main保持默认order: 0（不写也行） -
.left设order: -1，确保它视觉上排第一 -
.right设order: 1，确保它视觉上排第三 - 所有子元素必须是
.container的直接子元素，嵌套一层 div 就会让order失效
order 和 flex-grow 必须配合用
只调 order 不设 flex-grow，中间栏会塌成最小宽度（比如一行文字的宽度），根本撑不满剩余空间。
flex-grow: 1 是让 .main 吃掉左右栏之外的所有可用空间，但它生效的前提是：
- 父容器有明确宽度（比如
width: 100%或min-width: 0） - 左右栏没写死
width且没触发min-width: auto（比如含长 URL、未换行英文单词） - 左右栏加了
flex-shrink: 0，否则窄屏下会被压缩，挤占中间栏空间
推荐组合写法：
.main { flex-grow: 1; min-w-0; }
.left { width: 240px; flex-shrink: 0; order: -1; }
.right { width: 200px; flex-shrink: 0; order: 1; }
移动端断点里 order 很容易被忽略
小屏下三栏通常要退化为单列，这时如果只隐藏侧栏（display: none），.main 的 flex-grow: 1 会突然占满全宽——不是“撑满去掉左右后的宽度”，而是“撑满整个容器宽度”，视觉上反而变宽、错位。
正确做法是用媒体查询重置整个逻辑：
- 小屏下取消
order类（比如用md:order-1而非order-1） - 小屏下改
flex-direction: column，让三栏垂直堆叠 - 或者干脆移除
display: flex，回归块级流式布局
别指望靠 visibility: hidden + width: 0 保 flex 占位——这在 Safari 旧版和某些安卓 WebView 里行为不一致，容易出空隙或重叠。
IE11 下 order 基本不可靠
IE11 对 order 的解析极不稳定，尤其和 flex-grow 混用时，经常出现顺序错乱或完全不生效。
如果必须兼容 IE11：
- 所有 flex 相关属性加
-ms-前缀：display: -ms-flexbox、-ms-flex-order: -1、-ms-flex-positive: 1 - 避免用
flex: 1这类简写，拆成flex-grow: 1、flex-shrink: 0、flex-basis: 0并分别加前缀 -
min-width: 0在 IE11 中对 flex 子项无效，得用max-width: 100%+overflow: hidden替代防溢出
真正难的不是写对 order 值，是记住：HTML 顺序是地基，order 只是贴在墙上的壁纸——地基歪了，壁纸再怎么拉也盖不住裂缝。
