相信很多人在进行网页排版的时候经常会遇到这种或者类似的布局，很多张图片或模块横纵向排列，有可能其中的某一块尺寸还不一样，如下图
那这种我们该怎么快速的把它排出来呢？可以使用float浮动来做，也可以使用Flex弹性盒来做，那么我们今天就用Flex弹性盒来做一下。
1.首先我们需要先了解一下什么是Flex弹性盒，Flex是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提 供最大的灵活性，它是在2009年，由W3C 提出的一种新的方案，可以简便、完整、响应式地实 现各种页面布局。
2.第二点我们要了解一下它的属性，那么它有哪些属性呢，我们先来说说父容器的属性（大部分的时候我们都是使用父容器的属性）
1.flex‑direction：决定目标主轴排列方向，它有四个属性值**
flex-direction: row;// (默认值，水平方向，自左而右);
flex-direction: row-reverse;// (水平方向，自右而左);
flex-direction: column;// (垂直方向，自上而下);
flex-direction: column-reverse;// (垂直方向，自下而上);
2.flex‑wrap：换行（默认属性下，目标项目是自左而右排成一条直线，如果子元素的宽之和超过了父元素就要用到flex‑wrap还行了），它有三个属性值**
flex-flow: nowrap;// (默认值，不换行);
flex-flow: wrap;// (换行，第一行在上方);
flex-flow:wrap-reverse;// (换行，第一行在下方);
如图（为了方便理解就盗用了大神的张图）
3，justify‑content：水平方向对其方式，它有5个属性值**
justify-content: center;// (居中);
justify-content: flex-start;// (左对齐);
justify-content: flex-end;// (右对齐);
justify-content: space-around;// (中间等分，两边留空);
justify-content: space-between;// (中间等分，两边不留空);
4，align‑items：垂直对齐方式（子元素只有一行时）**
（为了方便理解就盗用了大神的张图）
5，align‑content：垂直对齐方式（子元素超出一行时）。这个一般不常用**
属性了解的差不多了，那就用flex来做一下上面的图片排版吧
首先我们先写出图中三种不同的模块，分别按位置排好顺序，同种类型的使用一个复制就行，但位置要对，从第一个开始为1 最后一个为10，从第一个往右数
<section class="pic">
<div class="texture-1">
<img src="../images/1.jpg" alt="">
<p></p>
<span>白书民宿的家-厦门</span>
</div>
<div class="texture-1">
<img src="../images/1.jpg" alt="">
<p></p>
<span>白书民宿的家-厦门</span>
</div>
<div class="texture-2">
<img src="../images/2.jpg" alt="">
</div>
<div class="texture-3">
<img src="../images/3.jpg" alt="">
</div>
<div class="texture-1">
<img src="../images/1.jpg" alt="">
<p></p>
<span>白书民宿的家-厦门</span>
</div>
<div class="texture-1">
<img src="../images/1.jpg" alt="">
<p></p>
<span>白书民宿的家-厦门</span>
</div>
<div class="texture-1">
<img src="../images/1.jpg" alt="">
<p></p>
<span>白书民宿的家-厦门</span>
</div>
<div class="texture-2">
<img src="../images/2.jpg" alt="">
</div>
<div class="texture-1">
<img src="../images/1.jpg" alt="">
<p></p>
<span>白书民宿的家-厦门</span>
</div>
<div class="texture-3">
<img src="../images/3.jpg" alt="">
</div>
</section>
从结构中可以看出一共就有texture-1，texture-2，texture-3，这三个，其他只是复制，然后开始写样式
&>.pic {
.whb(1100px, 1210px, rgb(255, 255, 255));
.center;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.texture-1 {
.whb(352px, 286px, #fff);
position: relative;
p {
display: block;
.whb(65px, 65px, #fff);
border-radius: 50%;
position: absolute;
top: 120px;
left: 145px;
}
span {
.whb(200px, 25px, none);
color: #fff;
display: block;
position: absolute;
top: 200px;
left: 110px;
}
}
.texture-2 {
.whb(352px, 286px, #fff);
}
.texture-3 {
.whb(717px, 286px, #fff);
}
div {
&:hover {
box-shadow: 0px 0px 1px 8px #fff, 0px 0px 20px 8px rgb(88, 88, 88);
}
}
}
可以看出我先给父元素pic转为了flex，然后又给了它justify-content: space-between;和flex-wrap: wrap;这两个属性值，然后就自动排列好了，是不是很方便呢，当然你的父容器要设置好合适的尺寸，这个别忘了。是不是很方便呢
小编学识有限，若有错误，还望及时指出，以免误导他人，谢谢！！！
