html - 跨多个容器使用 flex 订单属性

Question

如果我有以下 HTML 标记:

<div class="wrapper">
  <div id="container-1">
    <div class="child-1-1"></div>
    <div class="child-1-2"></div>
  </div>
  <div id="container-2">
    <div class="child-2-1"></div>
    <div class="child-2-2"></div>
  </div>
</div>

我可以将 flex 的显示应用到 wrapper，然后让 container-2 出现在 container-1 使用顺序。

我希望元素的最终顺序是:

1. 2-1 岁 child
2. child 1-1
3. 1-2 岁 child
4. 2-2 岁 child

我基本上想要的是让两个容器的 child 假装他们的 parent 不在场，而是从外包装接受他们的命令。

这当然可以通过复制组件并根据断点隐藏/显示，或通过 JS 来实现——所以没有必要提出这些建议。

Answer 1

flex order 属性仅适用于同一容器中的 sibling 。

因此，使用 order 重新排列分布在不同容器中的一系列 flex 元素是行不通的。

但根据您的要求，您似乎不需要多个容器。所有元素都可以存在于一个容器中。

.wrapper {
  display: flex;
  flex-wrap: wrap;
}

.child-1-1 { order: 1; }
.child-1-2 { order: 3; }
.child-2-1 { order: 2; }
.child-2-2 { order: 4; }

.wrapper > div {
  flex: 1 0 40%;
  height: 50px;
  margin: 5px;
  border: 1px solid #ccc;
  background-color: lightgreen;
  display: flex;
  align-items: center;
  justify-content: center;
}


@media ( max-width: 600px) {
  .wrapper {
    flex-direction: column;
  }
  div.child-2-1 {
    order: -1;
    background-color: orange;
  }
}

<div class="wrapper">
  <div class="child-1-1">child-1-1</div>
  <div class="child-1-2">child-1-2</div>
  <div class="child-2-1">child-2-1</div>
  <div class="child-2-2">child-2-2</div>
</div>

jsFiddle

在此处了解有关 flex order 属性的更多信息:

• Is there a “previous sibling” CSS selector?
• Flex order property not working as expected