水平和垂直方向的 CSS webkit flex 布局

Question

请注意，对于我正在使用的嵌入式设备，我只需要在 Chrome 中让它正常工作。另外请不要提供任何基于 float 、表格、内联 block 等的解决方案 - 我只对 CSS flex 答案感兴趣。

也就是说，我有如下标记:

<div class="wrap">
    <div class="a">red</div>
    <div class="b">blue</div>
    <div class="c">green</div>
</div>

和 CSS 为:

.wrap { display: -webkit-flex; height: 100%; }
.a { -webkit-flex: 1; max-width: 100px; background: red; }
.b { -webkit-flex-flow: row; -webkit-flex-direction: row; -webkit-flex: 1; background: blue; }
.c { -webkit-flex-flow: row; -webkit-flex-direction: row; -webkit-flex: 1; background: green; }

我想要实现的布局是:

______________
|red |blue   |
|    |_______|
|    |green  |
|    |       |
|____|_______|

红色框的高度应为 100%，最大宽度为 100px；蓝色和绿色框的总高度应为 100%。谁能告诉我如何使用-webkit-flex 来实现这一点？你可以看到我尝试过使用 flex flow 和 flex direction 但没有成功。

我用代码创建了一个 JSBin 链接:http://jsbin.com/usisic/3/edit

谢谢

Answer 1

    .wrap { display: -webkit-flex; max-width: 200px; height:200px; -webkit-flex-flow: column wrap;}
.a .b .c {
    max-width: 100px;
  -webkit-flex: 1;
}

.a {
  height:200px;
  background: red;
}

.b {
  background: blue;
  height:50%;
}

.c {
  background: green;
  height:50%;
}