CSS3如何实现图片木桶布局？（附代码）

本篇文章给大家通过代码示例介绍一下使用CSS3实现图片木桶布局的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

成都创新互联长期为上1000+客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为文成企业提供专业的成都网站制作、成都做网站，文成网站改版等技术服务。拥有十载丰富建站经验和众多成功案例,为您定制开发。

高度相同，而宽度不一样的布局，称之为木桶布局。它有几个鲜明的特点： 每行的图片高度一致；每行的图片都是占满的。

思路：

1、容器flex布局
2、图片定高、超出换行
3、图片都设置 flex-grow: 1; 以充满整行
4、图片都设置 object-fit: cover; 以解决图片变形
5、容器 :after 伪类 设置 flex-grow: 9999; 且值足够高 以解决最后一行图片数量少时仍然充满整行过于扁长

代码如下，复制即可使用：

效果图：

更多炫酷CSS3、html5、javascript特效代码，尽在：js特效大全！
网站名称：CSS3如何实现图片木桶布局？（附代码）
本文链接：http://hxwzsj.com/article/cjooid.html