CSS 参考手册 目录

CSS order 属性

CSS 属性:order

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

语法

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

示例

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

---- ------------------
    ---- --------------------
    ---- --------------------
    ---- --------------------
------
------------------ -
    ------ --
-

------------------ -
    ------ --
-

------------------ -
    ------ --
-

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

注意事项

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

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


上一篇:CSS 属性 opacity
下一篇:CSS 属性 outline