看到微博和朋友圈都實(shí)現(xiàn)了圖片九宮格，曾經(jīng)有次面試也問(wèn)到了九宮格這個(gè)問(wèn)題撮慨，當(dāng)時(shí)想到的是先固定每個(gè)單元格的寬高岸军，然后進(jìn)行浮動(dòng)。今天想折騰一下滞磺，實(shí)現(xiàn)自適應(yīng)父元素寬度的布局。
首先要注意的是九宮格容器是寬高相等的正方形莱褒，并且是自適應(yīng)的击困，這里關(guān)鍵是實(shí)現(xiàn)寬高相等，有些人想到了相對(duì)視口寬度 vw保礼，但是它是相對(duì)于屏幕可見(jiàn)寬度來(lái)設(shè)置的沛励，并且會(huì)忽略滾動(dòng)條的寬度，所以這是不可行的炮障。這里我用一種變通方法目派，看代碼
<!-- 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百分比是相對(duì)父元素寬度計(jì)算的 */
margin-bottom: 30px;
}
.square-inner{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; /* 鋪滿父元素容器，這時(shí)候?qū)捀呔褪冀K相等了 */
}
.square-inner>li{
width: calc(98% / 3); /* calc里面的運(yùn)算符兩邊要空格 */
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的比例進(jìn)行拉伸 */
background-color: #4d839c;
text-align: center;
color: #fff;
font-size: 50px;
line-height: 2;
}
.flex>li:nth-of-type(3n){ /* 選擇個(gè)數(shù)是3的倍數(shù)的元素 */
margin-right: 0;
}
.flex>li:nth-of-type(n+7){ /* 選擇倒數(shù)的三個(gè)元素胁赢，n可以取0 */
margin-bottom: 0;
}
