最近在做页面的时候，需要用到横向瀑布流布局，类似于百度图片展示页面的效果，简单看了一下，发现使用flex布局可以在纯CSS实现，做一下笔记。
首先，说明几个相关知识点：
1、flex-grow。这个属性可以让内容适应容器，始终保持容器处理填满的状态。
2、object-fit: cover。这个属性是img标签的属性，效果是适当裁切图片，保证图片不被拉伸，类似于background-size:cover

HTML代码：

<div class="box">
    <div class="imgBox">
        <!-- 假设有很多个 img 标签 -->
        <img src="img.src" />
    </div>
</div>

CSS代码：

.box{
    display: flex;
    flex-wrap: wrap;
}
.box:after{
    content: '';
    flex-grow: 99999; //使用伪类填充容器，防止出现最后一张图片单独占一行的情况
}
.imgBox{
    flex-grow: 1; //让图片始终填满一整行
    margin: 2px;
}
.imgBox img{
    width: auto;
    height: 150px;
    object-fit: cover; //图片适应容器并且不裁切
    min-width: 100%;
}