私はこのHTML持っている場合は別の容器に

Question

を項目を曲げるためのプロパティを適用する：

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

ことrow div要素が存在しないかのように、それらの1,2,3を注文することは可能ですか？

私が試した：

.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もフレックスコンテナではないことに注意してください。子どもたちは、フレックスの項目ではありませんので。）

あなたが.rowと.flex-item-2を再配置するorderを使用することができます。

あなたは.rowにdisplay: flexかinline-flexを適用する場合は、再度手配.flex-item-1と.flex-item-3にorderを使用することができます。

しかし、彼らは異なる親を持っているので、最初の2つは、後の2つで再配置することはできません。