我可以订购不同父母的孩子吗？

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结构.

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

MDN