CSS flexbox和网格：订单是默认值0还是1？

发布于 2025-02-03 04:21:35 字数 2091 浏览 0 评论 0 原文

在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>

这是相应的笔，您可以在其中看到渲染： httpps：// codepen.io/frankconijn/pen/bayxbzd 。

项目NR。首先显示2，而它具有顺序：0 ，该顺序应以将其放置在代码中的顺序（2nd）中显示。这表明规格不正确，默认值为1。我对吗？

原文

In Flexbox and Grid, we can change the order in which items are displayed, with among other things the order property. Everywhere, I'm reading that the default order value is 0, also on https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items.

But look at this example:

<!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>

Here is the corresponding Pen, in which you can see the rendering: https://codepen.io/FrankConijn/pen/BaYxBzd.

Item nr. 2 is displayed first, while it has order: 0, which should have it displayed in the order in which it is placed in the code (2nd). That suggests that the specs are incorrect, and that the default value is 1. Am I right?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

独留℉清风醉 2025-02-10 04:21:35

order 确实确实具有 0 的默认值#formal_definition“ rel =” nofollow noreferrer“> mdn形式定义＆amp; mdn'订购flex项目'），但是在您的示例中，您已经通过给出每个 .box exparlicit order order：1 ：1 ;这里顺序：0 on .box2 根据其属性出现在第一个位置中的属性正确行为。

如果您在 .box 类上删除订单，默认情况下订单（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>

order does indeed have a default value of 0 (MDN formal definition & MDN 'Ordering Flex Items'), but in your example you've overridden this by giving each .box an explicit order: 1; here the order: 0 on .box2 is behaving correctly according to its property in appearing in the 1st position.

If you remove the order on your .box class and let them order by default (0) you'll see that the position of .box2 is placed as it should be: as the 2nd box:

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>

回复收藏 0 原文

~没有更多了~