在遇到类似九宫格的排列布局时，我首先想到的是用flex布局的justify-content属性做操作，但是会出现一个问题————就是最后一行为两个元素的时候会出现分开排列的情况，这时候可以用伪元素解决这个问题
代码和效果如下：
<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代码，意思是留下一个宽度一样的占位盒子
.main:after {
content: "";
width: 100px;
}
image.png
就算是9个格子也不会出现BUG 因为没有设置高度 即高度为0
网友评论