CSS Flexbox 和 Grid：顺序的默认值是 0 还是 1？

Question

在 Flexbox 和 Grid 中，我们可以更改项目的显示顺序，其中包括 order 属性。无处不在，我读到默认的 order 值是 0，也在 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items.

但是看看这个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Order demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
<style>
    body {
        margin: 40px;
    }
    .wrapper {
        width: 600px;
        display: grid;
        grid-template-columns: repeat(6, 100px);
        grid-gap: 10px;
    }
    .box {
        background-color: #444;
        color: #fff;
        border-radius: 5px;
        padding: 20px;
        font-size: 150%;
        order: 1;
    }
    .box:nth-child(even) {
        background-color: #ccc;
        color: #000;
    }
    .box2 {
        order: 0;
    }
</style>
</head>
<body>
    <div class="wrapper">
        <div class="box box1">1</div>
        <div class="box box2">2</div>
        <div class="box box3">3</div>
        <div class="box box4">4</div>
        <div class="box box5">5</div>
        <div class="box box6">6</div>
        <div class="box box7">7</div>
        <div class="box box8">8</div>
        <div class="box box9">9</div>
        <div class="box box10">10</div>
        <div class="box box11">11</div>
        <div class="box box12">12</div>
    </div>
</body>
</html>

这里是对应的Pen，里面可以看到效果图：https://codepen.io/FrankConijn/pen/BaYxBzd.

商品编号2 首先显示，而它有 order: 0，应该按照它在代码中的放置顺序显示（第 2 个）。这表明规格不正确，默认值为 1。我说得对吗？

Answer 1

order 确实有默认值 0 (MDN formal definition & MDN 'Ordering Flex Items')，但在您的示例中，您通过给每个 .box 一个明确的order: 1;这里 .box2 上的 order: 0 根据其属性出现在第一个位置时表现正确。

如果您删除 .box class 上的订单并让他们默认订购 (0)，您会看到 .box2 的位置已按原样放置: 作为第二个方框:

body {
  margin: 40px;
}

.wrapper {
  width: 600px;
  display: grid;
  grid-template-columns: repeat(6, 100px);
  grid-gap: 10px;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}

.box:nth-child(even) {
  background-color: #ccc;
  color: #000;
}

.box2 {
  order: 0;
}

<body>
  <div class="wrapper">
    <div class="box box1">1</div>
    <div class="box box2">2</div>
    <div class="box box3">3</div>
    <div class="box box4">4</div>
    <div class="box box5">5</div>
    <div class="box box6">6</div>
    <div class="box box7">7</div>
    <div class="box box8">8</div>
    <div class="box box9">9</div>
    <div class="box box10">10</div>
    <div class="box box11">11</div>
    <div class="box box12">12</div>
  </div>
</body>

CSS Flexbox 和 Grid：顺序的默认值是 0 还是 1？

CSS Flexbox and Grid: is the order's default value 0 or 1?

css

flexbox

grid

flexboxgrid