在多个容器中使用flex order属性 [英] Using the flex order property across multiple containers

问题描述

如果我具有以下HTML标记:

If I have the following HTML markup:

<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 上方em>使用订单.

I can apply a display of flex to wrapper, and then make container-2 appear above container-1 using order.

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

I would like the final order of the elements to be:

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

我基本上想要的是让这两个容器中的孩子假装好像他们的父母不在那里，而是从外面的包装器接受订购.

What I basically want is for the children of the two containers to pretend as if their parents are not there, and instead take their ordering from the outer wrapper.

这当然可以通过复制组件并根据断点隐藏/显示或通过JS来实现，因此没有任何建议的地方.

This could of course be achieved via either duplicating the components and hiding/showing depending on the breakpoint, or via JS - so no points for suggesting those.

推荐答案

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

The flex order property applies only to siblings in the same container.

因此，使用order重新排列分布在不同容器中的一系列弹性物品将不起作用.

So using order to re-arrange a series of flex items spread across different containers will not work.

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

But based on your requirements, it doesn't appear you need multiple containers. All items can exist in a single container.

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

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

Learn more about the flex order property here:

• 是否存在先前的兄弟" CSS选择器?
• 弹性订单属性无法按预期运行

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

这篇关于在多个容器中使用flex order属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！