Flexbox 问题 - 移动优先到 iPad 设计答案

【问题标题】：Flexbox problems - Mobile First to iPad designFlexbox 问题 - 移动优先到 iPad 设计
【发布时间】：2014-06-12 00:36:19
【问题描述】：

所以我创建了移动网站，看起来不错，但现在我正在为 ipad 分辨率重新编码 css。移动网站的布局类似于http://jsfiddle.net/7UZm3/

HTML

<body>
<div class="box b1">Box One</div>
<div class="box b2">Box Two</div>
<div class="box b3">Box Three</div>
</body>

CSS

body {
display:flex;
flex-flow: column wrap;
height:400px;
}
.box {    flex:1;    }
.b1 {    background-color: green;    }
.b2 {    background-color: yellow;    }
.b3 {    background-color: pink;    }

但我想要的是框 1 跨越屏幕的整个高度，框 2 和框 3 与框 1 的右侧对齐。（因此框 1 的行跨度确实为 2）

我不太清楚需要设置什么属性。感谢您的帮助 =)

【问题讨论】：

标签： css layout flexbox

【解决方案1】：

您可以对框 2 和框 3 使用单独的包装器。然后将 flex-flow: column wrap 与 flex-flow: row wrap 组合在一起。看看这个fiddle。

【讨论】：

感谢您的解决方案，它有效，buuuttt ...有没有办法在没有包装器的情况下做到这一点？当然可以让框 1 跨越其他 2 个框而无需额外的 html？
我不这么认为。对不起。