我可以从其他父母那里订购孩子吗？

Question

使用CSS order属性，可以对没有相同直接父元素的元素进行排序吗？使用下面的示例，是否可以在item1和item3之间直观地排列item2？

我无法使它正常工作，所以我希望不会。只是以为我会检查。

.outer, container1, container2 {
  display: flex;
  flex-direction: column;
}

.item1 { order: 1; }

.item2 { order: 2; }

.item3 { order: 3; }

<div class="outer">
  <div class="container1">
    <p class="item1">Item 1</p>
    <p class="item3">Item 3</p>
  </div>

  <div class="container2">
    <p class="item2">Item 2</p>
  </div>
</div>

Answer 1

否

order要求元素共享父对象。您需要其他HTML结构。

  

order CSS属性指定用于在其flex或grid容器中布置flex或grid项的顺序。 相同容器中的项目根据其订单值以升序排列。具有相同顺序值的元素按照它们在源代码中出现的顺序进行排列。

     

MDN