CSS实现⾃适应九宫格布局⼤全
看到微博和朋友圈都实现了图⽚九宫格，曾经有次⾯试也问到了九宫格这个问题，当时想到的是先固定每个单元格的宽⾼，然后进⾏浮动。今天想折腾⼀下，实现⾃适应⽗元素宽度的布局。这次我只写了四种⽅式去实现九宫格，算上inline-block的话就是五种了。
⾸先要注意的是九宫格容器是宽⾼相等的正⽅形，并且是⾃适应的，这⾥关键是实现宽⾼相等，有些⼈想到了相对视⼝宽度 vw，但是它是相对于屏幕可见宽度来设置的，并且会忽略滚动条的宽度，所以这是不可⾏的。这⾥我⽤⼀种变通⽅法，看代码…
FlexBox
HTML 结构如下：
1 2 3 4 5 6 7 8 9 10 11 12 13<div class="square">
css设置表格滚动条<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>
抽取公共样式：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21.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的⼀个好处是不⽤再担⼼⾼度塌陷的问题，⽽且还可以轻松实现⼦元素横向竖向甚⾄按⽐例伸缩扩展的布局。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18.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;
}
Grid
对于⽹格布局来说，grid ⽐ flex 更为⽅便，代码量更少，可以处理更为复杂的结构。1<div class="square">
1 2 3 4 5 6 7 8 9 10 11 12 13<div class="square">
<div class="square-inner grid"> <div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</div>
1 2 3 4 5 6 7 8 9 10 11 12 id{
display: grid;
grid-template-columns: repeat(3, 1fr); /* 相当于 1fr 1fr 1fr */
grid-template-rows: repeat(3, 1fr); /* fr单位可以将容器分为⼏等份 */
grid-gap: 1%; /* grid-column-gap 和 grid-row-gap的简写 */
grid-auto-flow: row;
}
.grid>div{
color: #fff;
font-size: 50px;
line-height: 2;
text-align: center;
background: linear-gradient(to bottom, #f5f6f6 0%,#dbdce2 21%,#b8bac6 49%,#dddfe3 80%,#f5f6f6 100%); }
更多：
Float
浮动实现九宫格就不多说了，原理同上。
1 2 3 4 5 6 7 8 9 10 11 12 13<div class="square">
<ul class="square-inner float"> <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>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20.float::after{
content: "";
display: block;
clear: both;
visibility: hidden;
}
.float>li{
float: left;
background-color: #42a59f; text-align: center;
color: #fff;
font-size: 50px;
line-height: 2;
}
.float>li:nth-of-type(3n){
margin-right: 0;
}
.float>li:nth-of-type(n+7){
margin-bottom: 0;
}
除了浮动，这⾥ li 也可以使⽤display: inline-block；实现同样的效果，不过要注意HTML代码⾮压缩情况下⾏块级元素之间会出现默认间隔，不同浏览器下表现还不⼀样，这时可以给⽗级元素设置font-size: 0;
Table
1 2<div class="square">
<table class="square-inner table">
3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <tbody>
<tr>
<td>1</td> <td>2</td> <td>3</td> </tr>
<tr>
<td>4</td> <td>5</td> <td>6</td> </tr>
<tr>
<td>7</td> <td>8</td> <td>9</td> </tr>
</tbody>
</table>
</div>
1 2 3 4 5 6 7 8 9 10 11 12.table{
border-collapse: separate; border-spacing: 0.57em;
font-size: 14px;
empty-cells: hide;
table-layout: fixed;
}
.table>tbody>tr>td{
text-align: center;
background-color: #889ed8; overflow: hidden;
}
说下⽤表格实现九宫格有哪些瑕疵：
最后⼀⾏最后⼀列的单元格宽⾼与前⾯的不⼀致，虽然相差不⼤，但是还是有差异的；
与前⾯的两种⽅法不同，table 单元格之间的间隔是利⽤border-spacing属性实现的，且不⽀持百分⽐，单元格四周都有类似margin的外边距效果，如下图。
分析
综上来看，个⼈认为 FlexBox 适合⽤于移动端，PC端 IE10 以下不⽀持；Grid⽹格布局⽐较⽅便，但是规范还未成熟，主流浏览器⼚商尚未推⼴，不推荐使⽤在项⽬中；浮动和⾏块级式声明可以兼容到IE6，移动端和PC端⽀持的都不错；Table 因为实现有瑕疵所以不推荐使⽤。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论