在多个容器中使用 flex order 属性

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，然后使用order使container-2出现在container-1之上。

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

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

我基本上要的是两个容器的孩子们假装好像他们的父母不在那里，而是从外部把他们的订货包装。

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

Answer 1

flexorder属性仅适用于同一容器中的同级。

\n\n

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

\n\n

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

\n\n

\r\n

\r\n

.wrapper {\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n}\r\n\r\n.child-1-1 { order: 1; }\r\n.child-1-2 { order: 3; }\r\n.child-2-1 { order: 2; }\r\n.child-2-2 { order: 4; }\r\n\r\n.wrapper > div {\r\n  flex: 1 0 40%;\r\n  height: 50px;\r\n  margin: 5px;\r\n  border: 1px solid #ccc;\r\n  background-color: lightgreen;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n\r\n\r\n@media ( max-width: 600px) {\r\n  .wrapper {\r\n    flex-direction: column;\r\n  }\r\n  div.child-2-1 {\r\n    order: -1;\r\n    background-color: orange;\r\n  }\r\n}

\r\n

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

\r\n

\r\n

\r\n

\n\n

jsFiddle

\n\n

在此处了解有关 flexorder属性的更多信息：

\n\n

\n
• 是否有 \xe2\x80\x9cprevious兄弟\xe2\x80\x9d CSS 选择器？
\n
• Flex 订单属性未按预期工作
\n

\n