首先情况是这样的(如下图):
![](https://i-blog.csdnimg.cn/blog_migrate/3aca997f48cc3a53672ba48c67127854.png)
我们最终想要的效果应该是 既要平均分布,又要最后一排依次从左向右排列
第一种解决方式:
外层容器给弹性盒子布局 且给外层盒子一个after伪类元素
.wrap{
width: 200px;
height: 200px;
display: flex;
// 使其换行展示
flex-wrap: wrap;
// 且首个元素放置于起点 末尾元素放置于终点
justify-content: space-between;
}
// 此处可以理解为使用伪元素进行占位
.wrap::after{
content: "";
width: 60px;
}
![](https://i-blog.csdnimg.cn/blog_migrate/e5c98767e9edc188fbb4600dce31e9e2.png)
但是
当每行出现多于三个元素时 就会出现如下图情况
![](https://i-blog.csdnimg.cn/blog_migrate/960a20f03e4775cc34fa21adb1f26969.png)
这个时候我们就要考虑第二种解决方式啦:
使用Grid布局 (号称是最强大的的 CSS 布局方案)
.wrap{
margin: 50px auto;
width: 200px;
height: 200px;
display: grid;
justify-content: space-between;
// 划分列 功能函数关键字 repeat (auto-fill,45px)
// 根据子元素的盒子的份额自动计算可以平铺几次
grid-template-columns: repeat(auto-fill,45px);
// grid-gap 是 row-gap 和 column-gap 的简写形式。
grid-gap: 0 1px;
}
最终实现效果:(如下图)
![](https://i-blog.csdnimg.cn/blog_migrate/00e606eff2910197f98e85fdc41530eb.png)