用flex加百分比实现左右布局,右边区域再上下等分为三份。 demo可以延伸: 1.右边区域等分为二分之一.container .rightWrapper >
div的width设置为对应的百分比(50%), 四分之一(25%),以此类推。 2.左边区域上下或者左右布局(添加子元素,类似设置)。
3.加上浏览器前缀,处理flex布局的兼容性问题 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <
style> html,*{ padding:0; margin:0; box-sizing: border-box; } .container{
display:flex; } .container .leftWrapper{ background: green; height:400px; width:
25%; } .container .rightWrapper{ background: blue; height:400px; flex:1; display
:flex; flex-wrap: wrap; } .container .rightWrapper > div{ background:red; width:
33.33%; border:1px solid #ddd; } </style> <title>111</title> </head> <body> <div
class="container"> <div class="leftWrapper"></div> <div class="rightWrapper"> <
div class="right1"></div> <div class="right2"></div> <div class="right3"></div>
<div class="right4"></div> <div class="right5"></div> <div class="right6"></div>
</div> </div> </body> </html>
最终效果如下: