作者：Tim Vam Damme

让我们来看看一种超轻量级的方法，它可以为一组任意大小的照片创建水平砖砌效果。将任何照片丢到上面，它们将边对边无缝对齐。

该解决方案不仅轻巧，而且非常简单。我们将使用无序的图片列表和仅仅17行CSS代码，其中重点要领是flexbox和object-fit。

我有两个业余爱好：用照片记录生活，以及找出新旧CSS属性有趣的组合方式。

几周前，我参加了XOXO(注：XOXO是一个针对在线生活和工作的独立艺术家的实验性节日)并且拍摄了大量照片，然后我缩减为39张照片。为了拥有我自己的内容，我花了两年的时间来组建一个简单的照片博客，但始终无法实现我想要的布局：一个简单的砖砌布局，其中的照片填充行的同时要尊重其宽高比例(在iOS、Google Photos、Flickr上可以考虑使用Photos.app)。

我进行了一些研究来查看是否有任何轻量级、非JavaScript的选项，但是不能找到适合我需要的任何内容。面对一些延误的航班，我开始鼓捣一些代码，限制自己尽可能简化事情(因为这是我对乐趣的定义)。

由于我基本上是在创建图片列表，因此我选择了无序列表：

#所有像下冰雹一样的弹性盒子

然后是一连串电灯泡时刻：

• Flexbox非常适合通过根据单元格内容确定单元格的宽度来填充行。
• 这意味着所有图片(横向或纵向)需要有统一高度。
• 我可以使用object-fit:cover;确保图像充满了单元格。

从理论上讲，这听起来是一个靠谱的计划，这给了我90%满意度的结果。

ul {
display: flex;
flex-wrap: wrap;
}

li {
height: 40vh;
flex-grow: 1;
}

img {
max-height: 100%;
min-width: 100%;
object-fit: cover;
vertical-align: bottom;
}

注意：40vh似乎是台式机浏览器的最佳初始方式，以合理的大小显示两整行照片，并在下方显示更多内容。这还允许每行更多照片，从而大大提高了宽高比例。

我遇到的唯一问题是flexbox确实想要填满所有行，并且它对最后一行照片的长宽比做了一些蠢事。这可能是这种布局中我最不喜欢的一部分，但是我必须在列表的末尾添加一个空的

元素。

结合了这段CSS：

li:last-child {
flex-grow: 10;
}

注意：此处使用“10”是没有科学依据的。在我所有的测试汇总，这提供了最佳结果。(注：作者的意思是这是一个测试结果中较佳的数字，是一个根据结果不断调整后的尝试值。)