木桶布局

CSS3如何实现图片木桶布局?(附代码)
JavaScript

CSS3如何实现图片木桶布局?(附代码)

80 0

本篇文章给大家通过代码示例介绍一下使用CSS3实现图片木桶布局的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。高度相同,而宽度不一样的布局,称之为木桶布局。它有几个鲜明的特点: 每行的图片高度一致;每行的图片都是占满的。思路:1、容器flex布局2、图片定高、超出换行3、图片都设置 flex-grow: 1; 以充满整行4、图片都设置 object-fit: cover; 以解决图片变形5、容器 :after 伪类 设置 flex-grow: 9999; 且值足够高 以解决最后一行