在遇到類(lèi)似九宮格的排列布局時(shí)，我首先想到的是用flex布局的justify-content屬性做操作梗肝，但是會(huì)出現(xiàn)一個(gè)問(wèn)題————就是最后一行為兩個(gè)元素的時(shí)候會(huì)出現(xiàn)分開(kāi)排列的情況密任，這時(shí)候可以用偽元素解決這個(gè)問(wèn)題
代碼和效果如下：
<style>
.main {
outline: 1px solid;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.main>div {
width: 100px;
height: 100px;
margin-bottom: 10px;
background-color: lightgreen;
}
</style>
<body>
<div class="main">
<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>
</body>
image.png
加上如下CSS代碼滔吠，意思是留下一個(gè)寬度一樣的占位盒子
.main:after {
content: "";
width: 100px;
}
image.png
就算是9個(gè)格子也不會(huì)出現(xiàn)BUG 因?yàn)闆](méi)有設(shè)置高度 即高度為0
