Html 包装器中包含元素的CSS flexbox

我对排序元素有问题。我有一个容器（flexbox）和一个子容器（order=1）和兄弟容器div（我不会使用flexbox的包装器），子容器已订购但无法工作

可以查看完整示例：（检查包装器im更改订单）

---

谢谢

如果你想让第一个例子看起来像第二个例子，那你就倒霉了。Flex项目只能安排在其Flex容器中

+---------------+
|  +---------+  |
|  |    a    |  |
|  + --------+  |
|  +---------+  |
|  |    b    |  |
|  | +-----+ |  |
|  | |  c  | |  |
|  | +-----+ |  |
|  | +-----+ |  |
|  | |  d  | |  |
|  | +-----+ |  |
|  +---------+  |
+---------------+

如果外部容器和b都是柔性容器（

display:flex

应用于它们），则只有这些布置是可能的：

• （c）a
• （d）a
• 甲(丙)(丁)
• a（d c）

如果b不是弹性容器，那么c和d就不是弹性项，根本不能使用

order

属性进行排列

元素a、c和d必须是同级才能完全重新排列：

+---------------+
|  +---------+  |
|  |    a    |  |
|  + --------+  |
|  +---------+  |
|  |    c    |  |
|  + --------+  |
|  +---------+  |
|  |    d    |  |
|  + --------+  |
+---------------+

现在，您可以拥有上一个示例中的所有安排，再加上这些：

• c a d
• d a c

---

您的问题有点难理解，您的意思是希望第二个

.container

元素与第一个元素相同吗？或者第一个应该与第二个相同？我已经订购了一个孩子，两个孩子进入包装器和flexbox以订购包装器，孩子不在包装器中，我不希望包装器订单只是孩子进入。（参见带和不带包装器的代码笔示例）是的，我想要c-a-d安排，但a不是c-d的兄弟。谢谢你的解释