CSS Order 属性

CSS Order 属性是用来控制 HTML 元素的摆放顺序的属性，它对于 Flexbox 布局非常有用。

在 Flexbox 布局中，Flex 容器内的元素默认按照 HTML 索引顺序来排布，但是有时候我们需要改变元素的排列顺序，这时候就可以用 CSS Order 属性来实现。

语法

CSS Order 属性接收一个整数值。这个数值越小，元素就越靠前。

.item {
  order: <整数>;
}

用法

以下是一个简单的例子，我们有三个元素：#one, #two, #three，它们默认按照 HTML 索引顺序排布。

<div class="container">
  <div id="one">One</div>
  <div id="two">Two</div>
  <div id="three">Three</div>
</div>

.container {
  display: flex;
}

这时候我们想要将 #three 放到最前面，则可以使用 CSS Order 属性：

#three {
  order: -1;
}

这样一来，#three 就会出现在 #one 的前面，而其他元素的顺序不变。

注意事项

• CSS Order 属性是针对 Flex 内部元素设置的，也就是说，外部元素（比如 Flex 容器本身）不受影响。
• CSS Order 属性接收负数和小数，但是它们的计数方式与整数略有不同。通常不向下取整处理。详见下表：

• CSS Order 属性会改变元素的布局顺序，但不会影响元素的排版方式。
• 当两个元素都设置了 Order 属性时，它们之间的排列顺序取决于它们的 Order 属性设置。

总结

CSS Order 属性可以帮助我们控制 Flexbox 布局中元素的排布顺序。

• 该属性值为整数，值越小则元素排布越靠前。
• 可以设置负数值或小数值。
• 与计数方式相关，要注意计算方式。
• 不会影响排版方式。

若在开发中需要调整元素排列顺序，CSS Order 属性是一个非常有用的工具。