HTML中如何使用弹性盒

相信很多人在进行网页排版的时候经常会遇到这种或者类似的布局，很多张图片或模块横纵向排列，有可能其中的某一块尺寸还不一样，如下图

1.png

那这种我们该怎么快速的把它排出来呢？可以使用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.png

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：垂直对齐方式（子元素只有一行时）**
（为了方便理解就盗用了大神的张图）

4.png

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;这两个属性值，然后就自动排列好了，是不是很方便呢，当然你的父容器要设置好合适的尺寸，这个别忘了。是不是很方便呢

小编学识有限，若有错误，还望及时指出，以免误导他人，谢谢！！！

HTML中如何使用弹性盒

推荐阅读更多精彩内容