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 的显示应用于包装，然后将 container-2 显示在 container-1 使用订单。

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

子-2-1

子-1-1

子-1-2

子-2-2

我基本上想要的是两个容器中的孩子假装他们的父母不在那里，而是从外部的包装进行排序。

这当然可以通过复制组件和隐藏/显示取决于断点，或通过JS来实现 - 所以没有建议这些点。

Answer 1

flex order属性仅适用于同一容器中的兄弟姐妹。

因此，使用order重新排列分布在不同容器中的一系列弹性项目将无效。

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

.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属性：

在多个容器中使用flex命令属性

1 个答案:

jsFiddle