CSS order 属性

order 属性定义了一个弹性容器中的项目在主轴上的排列顺序。默认情况下，项目的 order 值为 0，值越小排列越靠前，值越大排列越靠后。

语法

.item {
    order: <number>;
}

• <number>：一个数字，表示项目在容器中的排列顺序。

示例

假设我们有一个弹性容器，里面有三个项目，分别为 A、B、C。我们可以通过 order 属性来控制它们的排列顺序。

<div class="container">
    <div class="item">A</div>
    <div class="item">B</div>
    <div class="item">C</div>
</div>

// www.javascriptcn.com code example
.item:nth-child(1) {
    order: 3;
}

.item:nth-child(2) {
    order: 1;
}

.item:nth-child(3) {
    order: 2;
}

在上面的示例中，项目 A 的 order 值为 3，项目 B 的 order 值为 1，项目 C 的 order 值为 2。因此，它们在容器中的排列顺序为 B、C、A。

注意事项

• order 只对弹性容器中的项目有效，对普通元素无效。
• order 值可以为负数，负数值会使项目排列在正数值之前。
• order 只会改变项目在主轴上的排列顺序，不会改变其在交叉轴上的位置。

以上就是关于 order 属性的介绍，希望能帮助你更好地理解和使用 CSS 弹性布局。