1

请注意，我只需要为我正在使用的嵌入式设备在 Chrome 中使用它。另外请不要给出任何基于浮点数、表格、内联块等的解决方案——我只对 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

谢谢

4

3 回答 3

2 
    .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%;
}
于 2013-02-19T17:46:44.043 回答
0 
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset=utf-8 />
    <title>nested flex</title>
    </head>
    <body>
      <div class="wrap">
        <div class="a">red</div>
        <div class="nested">
        <div class="b">blue</div>
        <div class="c">green</div>
      </div>
    </div>
</body>
</html>
.wrap { display: -webkit-flex; height: 50px; -webkit-flex-direction: row; -webkit-flex-flow: row; -webkit-flex-wrap: wrap;}
.a { -webkit-flex:1; max-width: 100px;background: red;}
.b { background: blue; height:40%; padding-bottom:5px;}
.c { background: green; height:40%; padding-bottom:5px;}
.nested {-webkit-flex:1; max-width: 50px;}
于 2013-02-18T17:27:32.880 回答
0

弹性盒解决方案

我很难让其他答案按预期工作。该解决方案不需要设置高度——响应可变数量的内容。

html, body {height: 100%; }

.wrap {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 100%;
}

.a {
  height: 100%;
  max-width: 100px;
}

.b, .c {
  width: 100%;
  flex-grow: 1;
}

.a { background: red; }
.b { background: blue; }
.c { background: green; }
<div class="wrap">
  <div class='a'>red</div>
  <div class='b'>blue</div>
  <div class='c'>green</div>
</div>

于 2016-11-08T01:01:02.030 回答