如何使用 CSS 设置灵活项目的顺序？

CSS 中有一个非常强大的属性 order 可以帮助我们设置灵活的项目顺序。使用 order 属性，我们可以不改变 HTML 结构的情况下，改变项目在容器中的排列顺序。

order 属性

order 属性可以改变项目在容器中的排列顺序，它接受一个整数值，值越小的项目越先排列，默认为 0。

.item {
  order: 2;
}

上面的代码将把 .item 元素放在容器的第二个位置。如果其他项目的 order 值都是默认值 0，那么 .item 将排在第一个。

使用顺序值

顺序值是项目的顺序。如果您想移动一个项目到第一位，但您不知道上一个项目的 order 值，则可以尝试使用一个大的负数。

.item1 {
  order: -1;
}

上面的代码将把 .item1 元素放在容器的第一个位置。

注意事项

• order 属性只适用于设置了 display: flex 或 display: grid 的容器。
• order 属性接受整数值，默认为 0，不能为小数。
• order 属性仅影响其所在容器内的项目顺序，不影响其他元素。
• order 属性不改变项目在 DOM 中的顺序。

总结

order 属性是一个非常强大的属性，它让我们可以轻松地改变项目在容器中的排列顺序，而不改变 HTML 结构。掌握 order 属性对于实现灵活布局是非常重要的。

参考资料：

• CSS Grid Layout - order
• CSS Flexible Box Layout - order