版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_34518793/article/details/79963133
最近在做页面的时候，需要用到横向瀑布流布局，类似于百度图片展示页面的效果，简单看了一下，发现使用flex布局可以在纯CSS实现，做一下笔记。
首先，说明几个相关知识点：
1、flex-grow。这个属性可以让内容适应容器，始终保持容器处理填满的状态。
2、object-fit: cover。这个属性是img标签的属性，效果是适当裁切图片，保证图片不被拉伸，类似于background-size:cover。
下面是代码：查看demo
<!DOCTYPE html>
<html>
<head>
<title>flex实现横向等高流式布局</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.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%;
}
</style>
</head>
<body>
<div class="box" id="box">
<div class="imgBox" v-for="img in imgs">
<img :src="img.src" />
</div>
</div>
<script type="text/javascript">
var data = {
imgs: []
}
for(var i=0;i<10;i++){
data.imgs.push({src:'img/'+(i+1)+'.jpg'});
}
var app = new Vue({
el: '#box',
data: data
})
</script>
</body>
</html>