CSS实现自适应九宫格布局 大全
看到微博和朋友圈都实现了图片九宫格，曾经有次面试也问到了九宫格这个问题，当时想到的是先固定每个单元格的宽高，然后进行浮动。今天想折腾一下，实现自适应父元素宽度的布局。这次我只写了四种方式去实现九宫格，算上 inline-block 的话就是五种了。 首先要注意的是九宫格容器是宽高相等的正方形，并且是自适应的，这里关键是实现宽高相等，有些人想到了相对视口宽度 vw，但是它是相对于屏幕可见宽度来设置的，并且会忽略滚动条的宽度，所以这是不可行的。这里我用一种变通方法，看代码… FlexBox HTML 结构如下： 1 2 3 4 5 6 7 8 9 10 11 12 13 < 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> 抽取公共样式： 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;