css - CSS flexbox 模块是否仅适用于直接子元素？

Question

看看我拥有并运行的网站的这个页面设计:

http://www.jungledragon.com/image/9472/barn_owl_close-up.html

如您所见，这涉及经典的两列布局。事情的顺序很重要。例如，您可以直接在照片旁边看到这涉及的物种。

我现在正在为这个网站编写响应式设计，并面临挑战。想象一下在狭窄的智能手机视口(viewport)上的那个页面。经典的策略是简单地将右栏“堆叠”在左栏下方，让用户垂直滚动。然而，就元素的排序而言，这远非理想。 “specie” block 将位于照片下方，用户必须先滚动浏览评论等内容，然后才能看到照片和 specie 之间的关系。

我正在努力解决这个问题，这篇解释 CSS 的 flexbox 作为可能解决方案的文章听起来很有前途:

http://www.jordanm.co.uk/post/21863299677/building-with-content-choreography

这里的想法是仅使用 CSS，就可以改变元素的视觉顺序，这正是我所需要的。不幸的是，从那时起我才知道这篇文章使用了过时的规范，并且几乎没有任何浏览器支持新规范:

http://css-tricks.com/old-flexbox-and-new-flexbox/

这对我来说是毁了它。尽管如此，我还是想在概念层面上提出我的问题:

我看到的所有关于 flexbox 的演示都有这么简单的标记:

<div id="somecontainer">
  <div id="child1"></div>
  <div id="child2"></div>
</div>

接下来，容器被声明为一个 flexbox，方向垂直。最后，为每个子元素分配一个顺序。例如，这允许使用单个 CSS 语句将 child2 移动到 child1 之上。

现在问题来了。如果实际标记更复杂，因为有额外的层次结构在起作用怎么办？一个例子:

<div id="somecontainer">

  <div id="colmain">

    <div id="content1"></div>
    <div id="content2"></div>
    <div id="content3"></div>

  </div>

  <div id="colside">

    <div id="content4"></div>
    <div id="content5"></div>
    <div id="content6"></div>

  </div>

</div>

如您所见，此标记具有额外的层次结构，要重新排序的实际内容 block 不是最高级别容器的直接子元素。他们是 child ，但不是直接 child 。

flexbox 和子元素的重新排序能否在这种情况下工作？例如，“content5”可以在“content1”和“content2”之间移动吗？

不管浏览器支持有多差，我都试图从概念上理解它是否会受到支持。我问的原因是因为额外的列层次结构在标记中非常常见，如果 flexbox 重新排序只对直接子元素起作用，那就太糟糕了。

Answer 1

回答你的问题标题:是的，这实际上是stated quite clearly在规范中:

The contents of a flex container consists of zero or more flex items: each child of a flex container becomes a flex item

如果规范中的措辞让您感到困惑，那是因为您的措辞有点不对:

They are childs but not direct childs.

child 根据定义是直接的...内部 div 称为 descendants，但不是子代，因为它们不是直接嵌套在 flex 容器中。

现在，任何带有 display: flex 或 display: inline-flex 的东西都被指定为 flex 容器。虽然每个 flex 元素都参与了 flex 容器的格式化上下文，但 flex 元素的后代是独立格式化的，与 flex 容器无关，就好像容器从一开始就没有 flex 一样。

因此，您不能对 flex 元素的后代重新排序，除非 flex 元素本身也为其后代制作了一个 flex 容器，但即便如此，您也不能重新排序超出此内部容器和围绕容器的 sibling 到外容器。