CSS3 弹性盒（ Flexible Box 或 flexbox）
是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
我们就用两个元素解决排列问题：
display:flex;和 flex:1;
flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。
1，设置背景为黑色，然后写两个块元素，第一个块元素用于总体框架高度自动，宽度固定。
2，第二个用于做成竖列的容器，宽度固定，高度自动。
3，然后在块元素内部写上图片标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>瀑布流效果</title>
</head>
<style>
body {
background-color: rgb(54, 54, 54);
}
.Div {
width: 80%;
display: flex;
margin: 0 auto;
}
.vid {
/* margin: 0 auto; */
margin-left: 10px;
flex: 1;
}
.vid img {
border: 1px solid rgb(255, 255, 255);
border-radius: 12px;
width: 300px;
height: auto;
}
</style>
<body>
<div class='Div'>
<div class="vid">
<!-- 图片来自百度，链接可能失效，如果失效，亲自行更改为可用的图片路径 -->
<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=646217123,1051321275&fm=26&gp=0.jpg"
alt="">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1568650403742&di=dc5b80f0b5dfba43123e5a8e40a8acc1&imgtype=0&src=http%3A%2F%2Fimg.mp.itc.cn%2Fupload%2F20160719%2F2683232b223241f7afdd16c8d967fdb7_th.jpg"
alt="">
<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=646217123,1051321275&fm=26&gp=0.jpg"
alt="">
</div>
<div class="vid">
<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=646217123,1051321275&fm=26&gp=0.jpg"
alt="">
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1626766103,1100379066&fm=26&gp=0.jpg"
alt="">
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=995828182,3465322655&fm=26&gp=0.jpg"
alt="">
</div>
<div class="vid">
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=995828182,3465322655&fm=26&gp=0.jpg"
alt="">
<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2391690342,2912636750&fm=26&gp=0.jpg"
alt=""> <img
src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=646217123,1051321275&fm=26&gp=0.jpg"
alt="">
<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=646217123,1051321275&fm=26&gp=0.jpg"
alt="">
<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=646217123,1051321275&fm=26&gp=0.jpg"
alt="">
</div>
</div>
</body>
</html>
只要容器的宽度固定好，高度自动，在弹性布局的牵制下，不管图片多大都会自动排列好成一竖，最终效果如图所示：
