【发布时间】：2013-04-08 19:33:19
【问题描述】：
我正在尝试在我的网站上使用 CSS3 flexbox，但效果有限。
我可以创建一个可爱的 3 列布局，但我希望第三列以特定的屏幕分辨率包裹在第二列之下。是否可以使用 flexbox，或者我必须恢复到更传统的方法？
我的代码位于http://jsfiddle.net/eFeC3/，它显示了我的代码当前的外观以及 flexbox 实现。
<style>
body > * > *{background:#666;color:#eee;padding:40px;margin:20px;text-align:center;}
/* Flex */
article{display:-webkit-flex}
section{-webkit-flex:1;-webkit-order:2}
nav{-webkit-order:1}
aside{-webkit-order:3}
/* Nasty */
#b, #c {overflow:hidden}
#a{float:left;margin:0px 40px 80px 20px}
</style>
<body>
<article>
<section>1</section>
<aside>2</aside>
<nav>3</nav>
</article>
<div id="demo">
<div id="a">3</div>
<div id="b">1</div>
<div id="c">2</div>
</div>
【问题讨论】：
-
您能否更清楚地了解您希望元素的布局方式？您重新排序元素的方式（3 1 2），包装元素会导致 2 小于 3。您必须在此处使用媒体查询来更正顺序。 codepen.io/cimmanon/pen/Axutc
-
顺序已经被 -webkit-order 属性改变了。这个想法是说在 800 像素处有 3 列，在 600 像素处有两列（导航是第一列，其他元素是第二列），然后在 400 像素处有一列（元素堆叠在一起）。您展示的演示（使用旧版本的 flexbox）会发生这种情况，但取决于宽度而不是由 css 强制
-
我的演示没有使用旧版本的 Flexbox，它提供了最大程度支持浏览器所需的所有属性。
-
抱歉，我看的太匆忙了。