CSS3中图片木桶布局是怎么实现的

这篇文章主要讲解了CSS3中图片木桶布局是怎么实现的，内容清晰明了，相信大家阅读完之后会有帮助。

创新互联企业建站,10多年网站建设经验，专注于网站建设技术，精于网页设计，有多年建站和网站代运营经验，设计师为客户打造网络企业风格，提供周到的建站售前咨询和贴心的售后服务。对于成都网站设计、成都网站制作中不同领域进行深入了解和探索，创新互联在网站建设中充分了解客户行业的需求，以灵动的思维在网页中充分展现，通过对客户行业精准市场调研，为客户提供的解决方案。

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

思路：

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

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

看完上述内容，是不是明白了CSS3中图片木桶布局是怎么实现的，如果还想学习更多内容，欢迎关注创新互联行业资讯频道。

标题名称：CSS3中图片木桶布局是怎么实现的
本文来源：http://jkwzsj.com/article/pppsch.html