应用顺序属性弯曲在不同的容器

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股利不存在？

我想：

.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属性仅适用于在同一柔性容器中弹性子项兄弟姐妹。

（并记住.row甚至不是柔性的容器。所以孩子不挠的项目。）

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

如果您申请display: flex或inline-flex到.row，您就可以使用order重新安排.flex-item-1和.flex-item-3。

但是因为他们有不同的父母，所以前两者不能与后两者重新排列。