0

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

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

谢谢

4

1 回答 1

1

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

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

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

  • (cd) 一个
  • (直流) 一个
  • 一（光盘）
  • 一（直流）

如果 b不是弹性容器，则 c 和 d 不是弹性项目，根本无法使用该order属性进行排列。

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

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

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

  • cad
  • 解码器
于 2013-03-14T12:41:23.670 回答