Flexbox网格1col 1row 3boxes

Question

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

Answer 1

是这样的吗？

* { 
 
    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>

Answer 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>

Answer 3

的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> 

你一定要想到的一切作为一个容器..该容器中的一切都可以被弯曲..

使用Flex，你需要避免与PX定义什么如果可能的话。与

％的单位坚持
VW/VH [R REM/EM