order属性仅改变视觉顺序，不改变DOM结构、可访问性及SEO顺序；需父容器设display:flex，仅对直接子元素生效，数值越小越靠前，相同值按HTML源序排列。
order属性只改变视觉顺序，不改DOM和可访问性顺序
写了order: -1却没看到元素跑前面？先确认它是不是真的在屏幕阅读器、Tab键焦点、SEO里也“提前”了——不会。它只动渲染层，不动HTML结构。主内容必须写在HTML最前面，否则order再怎么调，语义上还是错的。
常见错误现象：
- 给表单提交按钮设
order: -1让它视觉上置顶，结果键盘用户按Tab直接跳过它 - 把侧边栏
order: 1推到右边，但移动端用媒体查询重置时忘了清掉这个值，导致侧栏消失或错位 - 用
order: 999“强行压底”，后续加新模块没设order，结果新模块默认order: 0插进中间
父容器没设display: flex，order直接被忽略
DevTools里order属性灰掉、不生效？八成是display: flex没写对。它只在Flex上下文里起作用，block、grid、inline容器里完全无效。
检查这三件事：
立即学习“前端免费学习笔记（深入）”；
- 父容器CSS是否明确写了
display: flex或display: inline-flex - 子元素有没有被
position: absolute、float、display: contents或visibility: hidden踢出Flex流 - 子元素是否用了
display: none——它不参与布局，order自然没意义
order数值是相对排序，不是绝对位置索引
order: 2不代表“排第二”，而是“比order: 0靠后、比order: 3靠前”。它按数值升序排列所有Flex项目，相同值则回退到HTML源顺序。
推荐写法：
- 统一显式设置，比如三档：-1 / 0 / 1，避免魔数
- 别依赖默认值混搭——全设比部分设更可控
- 配合
flex-direction: column时，order影响的是上下顺序，不是左右
示例：.main { order: 0; flex-grow: 1; }、.left { order: -1; width: 240px; flex-shrink: 0; }、.right { order: 1; width: 200px; flex-shrink: 0; }
移动端响应式中order容易被覆盖或遗漏
小屏下三栏退化为单列，如果只靠display: none隐藏侧栏，.main的flex-grow: 1会撑满整个容器宽度，而不是“剩余宽度”——视觉上反而变宽、错位。
正确做法：
- 用媒体查询重置
order，比如@media (max-width: 768px) { .left, .right { order: 0; } } - 小屏改用
flex-direction: column，让三栏垂直堆叠 - 或者干脆移除
display: flex，回归块级流式布局
别指望visibility: hidden + width: 0保Flex占位——Safari旧版和某些安卓WebView行为不一致，容易出空隙或重叠。
真正麻烦的从来不是写order，而是它生效的前提条件太多：父容器、子元素状态、数值逻辑、响应式覆盖、可访问性约束——漏掉任意一环，就卡在“为什么没反应”里。
