这种响应式布局是否可以使用 Flexbox CSS？

【问题标题】：Is this responsive layout possible using Flexbox CSS?这种响应式布局是否可以使用 Flexbox CSS？
【发布时间】：2014-06-29 13:21:42
【问题描述】：

提前谢谢你。

我正在为这种布局而苦苦挣扎。

<article>
    <section class="content">1</section>
    <aside class="ads">2</aside>
    <section class="comments">3</section>
</article>

在全宽时，我希望 cmets 直接位于主要内容下方并位于左侧。但在移动设备上，我希望 cmets 位于页面底部，广告位于中间。

也许我在使用 flexbox 时走错了路？我使用浮动的问题是，如果边长比内容长，则 cmets 会被推到页面下方。

【问题讨论】：

您有文章包装部分和旁白？有什么 jsfiddle 可以玩吗？
@nol 接下来通常是对 HOW 的解释。

标签： html css layout responsive-design flexbox

【解决方案1】：

试试这个 CSS 示例。

HTML

<article>
    <section class="content">1</section>
    <aside class="ads">2</aside>
    <section class="comments">3</section>
</article>

普通的css

article{width:870px; margin:0 auto;}
.content{background-color:#0C0; float:left; width:700px; min-height:300px; margin:0 0 10px;}
.ads{background-color:#06F; width:150px; float:right; min-height:450px; margin:0 0 10px;}
.comments{background-color:#F00; float:left; width:700px; min-height:150px;}

响应式 CSS

article{width:100%;}
.content{float:none; width:auto; }
.ads{width:150px; float:right; min-height:450px; margin:0 0 10px;}
.comments{float:none; width:auto; }

【讨论】：