html - 元素在包装器内的 CSS flexbox

Question

我对排序元素有疑问。我有一个容器 (flexbox) 和一个 child (order=1) 和同级 div(我不会使用 flexbox 的包装器)， child 订购但不工作。

可以看到完整的例子:http://codepen.io/isyara/pen/HtniA (检查包装器 im-changed-order)

谢谢

Answer 1

如果您想让第一个示例看起来像第二个示例，那么您就不走运了。 flex 元素只能排列在它们的 flex 容器内。

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

如果外部容器和 b 都是 flex 容器(display: flex 应用于它们)，那么只有这些安排是可能的:

• (c d) a
• (d c) a
• 一个(c d)
• a (d c)

如果 b 不是 flex 容器，那么 c 和 d 就不是 flex 元素，根本无法使用 order 属性进行排列。

元素 a、c 和 d 必须是 sibling 才能完全重新排列它们:

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

现在你可以得到前面例子中的所有安排，加上这些:

• c a d
• d a c