看到微博和朋友圈都实现了图片九宫格，曾经有次面试也问到了九宫格这个问题，当时想到的是先固定每个单元格的宽高，然后进行浮动。今天想折腾一下，实现自适应父元素宽度的布局。
首先要注意的是九宫格容器是宽高相等的正方形，并且是自适应的，这里关键是实现宽高相等，有些人想到了相对视口宽度 vw，但是它是相对于屏幕可见宽度来设置的，并且会忽略滚动条的宽度，所以这是不可行的。这里我用一种变通方法，看代码
<!-- html布局 -->
<div class="square">
<ul class="square-inner flex">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
/* CSS样式 */
.square{
position: relative;
width: 100%;
height: 0;
padding-bottom: 100%; /* padding百分比是相对父元素宽度计算的 */
margin-bottom: 30px;
}
.square-inner{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; /* 铺满父元素容器，这时候宽高就始终相等了 */
}
.square-inner>li{
width: calc(98% / 3); /* calc里面的运算符两边要空格 */
height: calc(98% / 3);
margin-right: 1%;
margin-bottom: 1%;
overflow: hidden;
}
.flex{
display: flex;
flex-wrap: wrap;
}
.flex>li{
flex-grow: 1; /* 子元素按1/n的比例进行拉伸 */
background-color: #4d839c;
text-align: center;
color: #fff;
font-size: 50px;
line-height: 2;
}
.flex>li:nth-of-type(3n){ /* 选择个数是3的倍数的元素 */
margin-right: 0;
}
.flex>li:nth-of-type(n+7){ /* 选择倒数的三个元素，n可以取0 */
margin-bottom: 0;
}
