CSS order的使用

什么是CSS order

CSS中的order属性是flexbox布局模块中的一项属性，它用于指定flex容器中项目的排列顺序。在flex布局中，项目的order属性可以通过调整项目的值来改变项目的顺序。该属性的值可以是任意整数，默认值为0。

通过使用order属性，我们可以轻松地改变项目的排序顺序，而无需改变项目在HTML结构中的位置。

order属性的语法及取值范围

order属性的语法如下：

.item {
  order: <number>;
}

其中，order属性的取值为一个整数（可以是负数），表示项目在flex容器中的排列顺序。数值小的项目在数值大的项目之前进行排列。

order属性的使用示例

为了更好地理解order属性的使用，我们来看几个示例。

示例1：改变项目的排列顺序

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
      flex-direction: row;
    }

    .item {
      width: 100px;
      height: 100px;
      background-color: #ff0000;
      margin: 10px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">1</div>
    <div class="item" style="order: 3;">2</div>
    <div class="item" style="order: 1;">3</div>
    <div class="item" style="order: 2;">4</div>
  </div>
</body>
</html>

在这个示例中，我们创建了一个flex容器，并在容器中添加了4个项目。我们通过设置不同的order值来改变这些项目的排列顺序。当我们运行这段代码时，项目将按照order属性的值进行排序，而不是按照它们在HTML结构中的顺序排列。

示例2：使用负数改变项目的排列顺序

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
      flex-direction: row;
    }

    .item {
      width: 100px;
      height: 100px;
      background-color: #ff0000;
      margin: 10px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item" style="order: -1;">1</div>
    <div class="item" style="order: -2;">2</div>
    <div class="item" style="order: -3;">3</div>
    <div class="item" style="order: -4;">4</div>
  </div>
</body>
</html>

在这个示例中，我们使用负数作为order属性的值来改变项目的排列顺序。当我们运行这段代码时，项目将按照order属性的值进行倒序排列。数值越小的项目将排在数值越大的项目之前。