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

问题描述

请查看我拥有并运行的网站的此网页设计：

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.

我现在正在为这个网站编写一个响应式设计，面对一个挑战。想象一下，在一个狭窄的智能手机视口的页面。经典的策略是简单地堆叠在左边下面的右栏，并让用户垂直滚动。然而，这在元件的排序方面远不是理想的。 specie块将在照片下方，用户将首先必须滚动通过诸如评论之类的东西，才能看到照片和物品之间的关系。

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.

我试图解决这个问题，这篇文章解释CSS的flexbox作为一个可能的解决方案听起来很有希望：

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

这里的想法是，只使用CSS，可以改变元素的视觉顺序，正是我需要的。不幸的是，从那时起，我了解到该文章使用了过时的规范，并且新规范几乎不被任何浏览器支持：

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:

我所看到的关于flexbox的所有演示都有标记这样简单： p>

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>

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

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.

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

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

无论浏览器支持不佳，我都试图从概念上了解是否支持。我问的原因是因为额外的列层次结构在标记中非常常见，如果flexbox重排序只适用于直接子结构，它将完全吸收。

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.

推荐答案

要回答您的问题标题：是的，这实际上是说得很清楚 in the spec：

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

flex容器的内容由零个或多个 flex items / strong>：flex容器的每个子项成为一个flex项

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.

一个子是直接的定义...内部 div

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.

现在，任何带有 display：flex 的东西c $ c>或 display：inline-flex 被指定为flex容器。虽然每个flex项目都参与了flex容器的格式化上下文，但是flex项目的后代是独立地格式化的，而不管flex容器是什么，就像容器从未被弯曲过一样。

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.

因此，你不能重排序flex项目的后代，除非flex项目本身也为它的后代做了一个flex容器，但即使这样，你不能重新排序超出这个内部容器和容器的相对于外容器的兄弟姐妹。

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