Question

正如标题所暗示的那样，我正在弄乱display: flex和order:。当我从我的第一个订购div（order: 0;）开始时，它将从我页面的顶部开始。当我添加第一个（order: 1;）时，它从页面底部开始，依此类推。还有什么奇怪之处在于，当我向订单添加更多div时，它会逐渐将它们移动到页面上，直到它们最初应该启动的位置。

＆＃13;

.container {
  display: flex;
  flex-wrap: wrap;
}

.box {
  width: 100%;
  height: 100px;
  text-align: center;
}

.lime {
  width: 100%;
  order: 0;
  background-color: lime;
}

.red {
  width: 50%;
  order: 1;
  background-color: red;
}

.orange {
  width: 50%;
  order: 2;
  background-color: orange;
}

.teal {
  width: 100%;
  order: 3;
  background-color: teal;
}

.light_blue {
  width: 20%;
  order: 4;
  background-color: lightblue;
}

.dark_blue {
  width: 60%;
  order: 5;
  background-color: darkblue;
}

.green {
  width: 20%;
  order: 6;
  background-color: green;
}

＆＃13;

<body>
  <div class="container">
    <div class="box lime"></div>
    <div class="box dark_blue"></div>
    <div class="box light_blue"></div>
    <div class="box green"></div>
    <div class="box red"></div>
    <div class="box orange"></div>
    <div class="box teal"></div>
  </div>
</body>

＆＃13;

我想我的问题是为什么会发生这种情况，为什么我在我的CSS末尾添加.green {width: 20%; order: 6; background-color: green;}后才能按预期工作？

Answer 1

您的标记按预期正常工作（并且只有在您设置$(document).on("change", "input[name^=shipping_method]", shipping_method_selected)后才能按预期工作，因为在此之前该元素的默认值为order:6）

请记住order：

默认情况下，Flex项目按源顺序排列。然而 order:0属性控制它们在flex中的显示顺序容器

但是，只需在您使用的相同元素中使用order的4,5和6，就可以简化代码中order的使用。

＆＃13;

order

＆＃13;

body {
  margin: 0
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.box {
  height: 100px;
}

.lime {
  background-color: lime;
}

.red {
  background-color: red;
}

.orange {
  background-color: orange;
}

.teal {
  background-color: teal;
}

.light_blue {
  order: 4;
  background-color: lightblue;
}

.dark_blue {
  flex: 0 60%;
  order: 5;
  background-color: darkblue;
}

.green {
  order: 6;
  background-color: green;
}

.fifthish {
  flex: 0 20%
}

.half {
  flex: 0 50%
}

.full {
  flex: 0 100%
}

＆＃13;

使用＆＃34; order＆＃34;当我添加更多时，属性在底部开始div并逐渐上升

1 个答案: