CSS flexbox与元素内包装器

Question

我的订购元素有问题。我有一个容器（flexbox）与一个孩子（order = 1）和兄弟div（包装我不会使用flexbox）与孩子订购但不工作。

可以看到完整示例：http://codepen.io/isyara/pen/HtniA（检查包装器im-changed-order）

感谢

Answer 1

如果您想要的是第一个示例看起来像第二个示例，那么您就不走运了。 Flex项目只能安排在Flex容器中。

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

如果外部容器和b都是弹性容器（display: flex都适用于它们），那么只有这些安排是可能的：

• （c d）a
• （d c）a
• a（c d）
• a（d c）

如果b 不是一个弹性容器，则c和d不是弹性项目，并且根本不能使用order属性进行排列。

元素a，c和d必须是sibbling才能完全重新排列它们：

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

现在你可以拥有上一个例子的所有安排，加上这些：

• c a d
• d a c