flex元素顺序调整靠标准属性order，非\_order；其默认值为0，按值升序排列，相同时依HTML源码顺序；负值前置，不支持小数或单位，且不影响DOM结构与:nth-child()。
flex 元素顺序调整靠 order，不是 _order
CSS 里没有 _order 这个属性，这是常见拼写错误或受某些预处理器/框架误导产生的写法。真正控制 flex 子项排列顺序的是标准属性 order，它只在 display: flex 或 display: inline-flex 的容器上生效。
order 的默认值和排序逻辑
每个 flex 子项的 order 默认值是 0。浏览器按 order 值从小到大排列元素；值相同时，按 HTML 源码顺序（document order）保持原有位置。
-
order接受任意整数（正、负、零），不支持小数或单位 - 负值会让元素“提前”，比如
order: -1会排在所有order: 0元素之前 - 改变
order不影响 DOM 结构，也不触发重排以外的副作用（如不会影响:nth-child()选择器）
实际用法与易错点
直接在 flex 子元素上设置 order 即可，无需修改父容器。但要注意几个典型陷阱：
Miller CSV TSV JSON 数据处理器
下载
Miller (mlr) 是一个命令行工具，用于查询、整形和重新格式化名称索引数据，如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。
- 父容器没设
display: flex→order完全无效 - 给子元素设了
float或position: absolute→ 脱离 flex 流，order失效 - 用 JavaScript 动态改
order时，别漏掉单位（它不是长度值，不能写order: 2px） - 服务端渲染或 SSR 场景下，若初始
order值依赖 JS 计算，可能造成水合不一致（hydration mismatch）
/* HTML */
<div class="container">
<div class="item" id="a">A</div>
<div class="item" id="b">B</div>
<div class="item" id="c">C</div>
</div>
<p>/<em> CSS </em>/
.container {
display: flex;
}</p><h1>b { order: -1; } /<em> B 会显示在最前面 </em>/</h1><h1>c { order: 1; } /<em> C 会显示在最后 </em>/替代方案：什么时候不该用 order
order 适合视觉顺序调整，但不适合语义或可访问性重排。屏幕阅读器仍按 DOM 顺序读取，所以：
立即学习“前端免费学习笔记（深入）”；
- 如果“把按钮提到最前”是为了操作优先级，应同步调整 HTML 结构或用
aria-flowto等辅助属性 - 做响应式切换顺序（比如移动端调换左右栏）时，
order很方便；但若涉及 SEO 或内容权重变化，更推荐用媒体查询 +flex-direction: column配合源码顺序优化 - 动画
order值本身不会产生过渡效果（它不支持 CSS transition），需要配合transform或其他可动画属性来模拟位移
真正要调顺序时，先确认是否只是视觉层需求——否则光靠 order 可能埋下可访问性或 SEO 隐患。
