應用順序屬性彎曲在不同的容器

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。

但是因爲他們有不同的父母，所以前兩者不能與後兩者重新排列。