CSS flexbox 模块是否仅适用于直接子元素? [英] Does the CSS flexbox module work on direct child elements only?

问题描述

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

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

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

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

我正在尝试解决这个问题，这篇文章将 CSS 的 flexbox 解释为一种可能的解决方案，听起来很有希望:

http://www.jordanm.co.uk/post/21863299677/building- 内容编排

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

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

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

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

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

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

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

<div id="colmain"><div id="content1"></div><div id="content2"></div><div id="content3"></div>
<div id="colside"><div id="content4"></div><div id="content5"></div><div id="content6"></div>

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

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

无论浏览器支持不佳，我都试图从概念上了解是否会支持.我问的原因是因为附加的列层次结构在标记中非常常见，如果 flexbox 重新排序仅适用于直接子项，那将完全糟糕.

解决方案

回答你的问题标题:是的，这其实是在规范中非常清楚地说明:

<块引用>

弹性容器的内容由零个或多个弹性项目组成:弹性容器的每个子项都成为弹性项目

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

<块引用>

他们是孩子，但不是直系孩子.

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

现在，任何带有 display: flex 或 display: inline-flex 的东西都被指定为 flex 容器.虽然每个 flex item 都参与到 flex 容器的格式化上下文中，但 flex item 的后代被独立地格式化并且与 flex 容器无关，就像容器从一开始就没有被折叠一样.

因此，您不能对 flex 项的后代重新排序，除非 flex 项本身也为其后代创建了一个 flex 容器，但即便如此，您也不能将它们重新排序到这个内部容器之外和容器的兄弟周围到外部容器.

Have a look at this page design of a site I own and run:

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

As you can see, this concerns a classic two-column layout. The order of things is important. For example, you can see directly next to the photo what specie this concerns.

I'm now coding a responsive design for this site, and facing a challenge. Imagine that page on a narrow smartphone viewport. The classic strategy would be to simply "stack" the right column below the left one and let users scroll vertically. However, this is far from ideal in terms of the ordering of elements. The 'specie' block would be way below the photo, users would first have to scroll through things like comments before they can see the relationship between the photo and the specie.

I'm trying to solve that, and this article which explains CSS's flexbox as a possible solution sounded very promising:

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

The idea here is that using CSS only, one can change the visual order of elements, exactly what I need. Unfortunately, since then I learned that the article uses the outdated spec, and that the new spec is barely supported by any browser:

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

This kind of ruins it for me. Nevertheless, I'd still like to ask my question at the conceptual level:

All of the demos that I have seen regarding flexbox have markup as simple as this:

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

Next, the container is declared to be a flexbox, direction vertical. And finally, an order is assigned to each child element. This allows for example child2 to be moved above child1, using a single CSS statement.

Now here's the question. What if the actual markup is more complex in the sense that there are additional hierarchies at play? An example:

<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>

As you can see, this markup has additional hierarchies, the actual content blocks to be reordered are not direct child elements of the highest level container. They are childs but not direct childs.

Could flexbox and the reordering of child elements work in such a scenario? Could for example "content5" be moved in between "content1" and "content2"?

Regardless of poor browser support, I'm trying to conceptually understand whether that would be supported. The reason I ask is because the additional column hierarchies are extremely common in markup and it would totally suck if flexbox reordering would work only on direct childs.

解决方案

To answer your question title: yes, this is actually stated quite clearly in the spec:

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

In case the wording in the spec confuses you, that's because your wording is a bit off:

They are childs but not direct childs.

A child is direct by definition... the inner divs are called descendants, but not children in that they're not directly nested within the flex container.

Now, anything with display: flex or display: inline-flex is designated a flex container. While each flex item participates in the flex container's formatting context, the flex item's descendants are formatted independently and regardless of the flex container, being the same as if the container was never flexed in the first place.

As such, you can't reorder descendants of flex items, except if the flex item itself is also made a flex container for its descendants, but even then you cannot reorder them beyond this inner container and around the container's siblings with respect to the outer container.

这篇关于CSS flexbox 模块是否仅适用于直接子元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！