应用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,好像rowdiv不存在？

我试过了:

.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容器中作为兄弟节点的flex项.

(请记住,.row甚至不是灵活容器.所以孩子们不是弹性物品.)

你可以order用来重新安排.row和.flex-item-2.

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

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