Flexbox 网格 1 列 1 行 3 框答案

【问题标题】：Flexbox grid 1col 1row 3boxesFlexbox 网格 1 列 1 行 3 框
【发布时间】：2017-11-06 01:17:59
【问题描述】：

如何在不创建 2 列的情况下制作此网格？

【问题讨论】：

向我们展示您目前尝试过的代码。

【解决方案1】：

Flex 让生活变得超级轻松..

.container {
display:flex;
}

.left {
    flex:2;
    background-color: #c1c1c1;
}
.container_right {display: flex;
                    flex: 1;
                    flex-direction:column}
.right {
    flex:1;
background-color: #456456;
}

和 html..

<div class="container">
    <div class="left">aaaaaaaaaaaa</div>

    <div class="container_right">
        <div class="right">bbbbbbbbbbbb</div>
        <div class="right">cccccccccccc</div>
    </div>

</div>

你只需要把所有东西都想象成一个容器……容器内的所有东西都可以弯曲……

如果可能，您需要避免使用 px 定义任何内容。坚持使用单位

%
体积/体积 rem/em

【讨论】：

【解决方案2】：

这是我想要的弹性盒子..

.vert_flex {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    border: 1px solid black;
}

.hor_flex {
    display: flex;
    flex-direction: row;
    height: 100%;
    width: 100%;
    border: 1px solid black;
}

<div class="hor_flex">
  <div style="flex : 2; height: 300px">width 66.6%</div>
<div class="vert_flex" style="flex : 1; height: 300px">
  <div class="hor_flex" style="flex : 1">width 33.3%</div>
  <div class="hor_flex" style="flex : 1">width 33.3%</div>  
</div>
</div>

【讨论】：

【解决方案3】：

这样的？

* {
  box-sizing: border-box;
}
.container {
  width: 100%;
}
.left {
  width: 66.66%;
  height: 400px;
  float: left;
  background-color: blue;
}
.right {
  width: 33.33%;
  height: 200px;
  float: right;
  background-color: red;
  border: thin solid black;
}

<div class="container">
  <div class="left"></div>
  <div class="right"></div>
  <div class="right"></div>
</div>

【讨论】：