看看我拥有并运行的网站的这个页面设计:
http://www.jungledragon.com/image/9472/barn_owl_close-up.html
如您所见,这涉及经典的双列布局.事情的顺序很重要.例如,您可以直接在照片旁边看到这个问题.
我现在正在编写针对该网站的响应式设计,并面临挑战.想象一下在狭窄的智能手机视口上的页面.经典的策略是简单地"堆叠"左侧下方的右列,让用户垂直滚动.然而,就元素的排序而言,这远非理想."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>
如您所见,此标记具有其他层次结构,要重新排序的实际内容块不是最高级别容器的直接子元素.他们是孩子,但不是直接的孩子.
flexbox和子元素的重新排序是否适用于这种情况？例如,"content5"可以在"content1"和"content2"之间移动吗？
无论浏览器支持不佳,我都试图在概念上理解是否支持它.我问的原因是因为额外的列层次结构在标记中非常常见,如果flexbox重新排序仅适用于直接子节点,那将完全糟糕.
Bol*_*ock 33
回答你的问题标题:是的,这在规范中已经说得很清楚了:
Flex容器的内容由零个或多个flex项组成:flex容器的每个子项都变为flex项
如果规范中的措辞让你感到困惑,那是因为你的措辞有点偏僻:
他们是孩子,但不是直接的孩子.
根据定义,子项是直接的......内部divs被称为后代,而不是子项,因为它们不直接嵌套在flex容器中.
现在,任何带有display: flex或被display: inline-flex指定为flex容器的东西.当每个flex项目参与Flex容器的格式化上下文时,flex项目的后代将独立格式化,无论Flex容器如何,都与首先从未弯曲容器的情况相同.
因此,你不能重新排序flex项的后代,除非flex项本身也为它的后代创建了一个flex容器,但即使这样你也不能将它们重新排序到这个内部容器之外和容器的兄弟姐妹周围.容器.
Flex 容器的（直接）子框将成为 Flex 项目。但这些不一定对应于（直接）子元素。
一些例子：
::before和伪元素生成 Flex 项目。::afterdisplay: contents，则不会渲染它，并且其子元素（Flex 容器的孙子元素）将显示为 Flex 项目。然后，如果 Flex 容器内部有一个复杂的结构，并且希望树的叶子成为外部容器的 Flex 项目，则可以使用 来设置所有中间元素的样式display: contents。
但是，notedisplay: contents是最近添加的，因此尚未得到广泛支持。