17370845950

order属性用于调整Flexbox子元素的显示顺序，整数值越小越靠前，默认为0。需父容器设为flex才生效，不改变DOM结构，适用于响应式布局调整。

在CSS中，order属性用于控制弹性盒子（Flexbox）容器中子元素的排列顺序。默认情况下，弹性子元素按照它们在HTML中出现的顺序进行排列，但通过order属性可以灵活地改变这一顺序。

基本语法

order: ;

其中， 是一个整数值，可以是正数、负数或零。默认值为 0。数值越小，元素越靠前排列；数值相同时，按文档流顺序排列。

使用场景与示例

假设你有一个弹性容器，包含三个子元素，你想让第二个元素显示在最后：

.container {
  display: flex;
}
.item1 { order: 1; }
.item2 { order: 3; }
.item3 { order: 2; }

此时，页面上显示的顺序将是：item1 → item3 → item2。

注意事项

• 仅对弹性子元素有效：只有当父容器设置了 display: flex 或 display: inline-flex 时，order 才会起作用。
• 不影响语义结构：虽然视觉顺序改变了，但DOM结构和屏幕阅读器读取的顺序不变，因此要考虑可访问性问题。
• 不要依赖 order 来修复结构问题：建议HTML结构本身保持合理的语义顺序，order 应用于布局微调而非重构内容逻辑。

基本上就这些。合理使用order能让布局更灵活，尤其在响应式设计中调整元素显示顺序时非常实用。