用弹性伸缩布局就可以很好的解决这个问题。
总结下来,最关键的几句话就是父元素 display: flex, flex-wrap: wrap,子元素 width: 32% margin:0.5%。
其中,最关键的是启用 flex-wrap 这个自动换行属性。
html 为:
<
css
.
最终实现的效果是:
![09bec8f39db4748e0957b3192202f83a.png](https://i-blog.csdnimg.cn/blog_migrate/41c0d0e1280f75488ff5bac656c298f1.png)
用弹性伸缩布局就可以很好的解决这个问题。
总结下来,最关键的几句话就是父元素 display: flex, flex-wrap: wrap,子元素 width: 32% margin:0.5%。
其中,最关键的是启用 flex-wrap 这个自动换行属性。
html 为:
<
css
.
最终实现的效果是: