用弹性盒实现九宫格布局
<!-- css flex布局实现响应式九宫格以及calc()计算表达式的值 -->
<!DOCTYPE html>
<html>
<style>
.blockDiv{
width: 100%;
display:flex;
flex-wrap: wrap;
}
.block{
width: calc(calc(100% / 3) - 10px);
margin:5px;
height:50px;
box-sizing: border-box;
border:1px solid #000;
}
</style>
<body>
<div class="blockDiv">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
</body>
</html>
flex-wrap:默认情况下，项目在一行排列。这个属性决定当项目在一行排不下时，如何换行。值为:wrap | no-wrap || wrap-reverse
css3的calc()
calc()可以计算不同单位的值，也可以嵌套，不过符号之间一定要有空格，虽然"*"、"/"之间可以没有，建议还是加上空格。例如：width:calc(100% - 30px)；
*如果你用得到的话可以直接拿走，在我的QQ技术交流群里，可以自助拿走，群号是581286372*
