应用order属性来弯曲不同容器中的项目

Question

如果我有这个HTML：

<div class="flex">
  <div class="row">
    <div class="flex-item-1">stuff</div> 
    <div class="flex-item-3">stuff</div> 
  </div>
  <div class="flex-item-2">stuff</div>
</div>

是否可以订购那些1,2,3，好像row div不存在一样？

我试过了：

.flex { display:flex; flex-direction: column; }
.flex-item-1 { order: 1; }
.flex-item-2 { order: 2; }
.flex-item-3 { order: 3; }

但是因为它们最初不是相同的父/子嵌套级别（甚至是子容器），所以这不起作用。

Answer 1

使用您当前的HTML结构，这是不可能的。

order属性仅适用于同一个Flex容器中兄弟的弹性项目。

（请记住，.row甚至不是灵活容器。所以孩子们不是弹性项目。）

您可以使用order重新安排.row和.flex-item-2。

如果您将display: flex或inline-flex应用于.row，则可以使用order重新安排.flex-item-1和.flex-item-3。< / p>

但由于他们有不同的父母，前两个不能与后两者重新安排。