在面试的时候，当面试官问我们为什么要使用flex布局的时候，首先我们得先明白一点，问这个问题面试官到底想要了解什么？简单的回答”好用“肯定是不行的，任何方案和技术的出现都是为了弥补之前的缺陷，所以相比传统的布局方案存在的痛点，flex布局肯定有存在的优势和价值。所以接下来我们得说传统的布局是怎样的形式，然后使用了flex布局又是什么样的形式。

布局的传统解决方案，基于盒子模型，依赖 display，position，float 等属性。它对于那些特殊布局非常不方便。

盒子水平垂直居中有几种方式

1、绝对定位。盒子宽高已知， position: absolute; left: 50%; top: 50%; margin-left:-自身一半宽度; margin-top: -自身一半高度;

2、table-cell布局。父级 display: table-cell; vertical-align: middle;  子级 margin: 0 auto;

3、定位 + transform ; 适用于 子盒子 宽高不定时； （这里是本人常用方法）
    
    position: relative / absolute;
    /*top和left偏移各为50%*/
       top: 50%;
       left: 50%;
    /*translate(-50%,-50%) 偏移自身的宽和高的-50%*/
    transform: translate(-50%, -50%); 注意这里启动了3D硬件加速哦 会增加耗电量的 （至于何是3D加速 请看浏览器进程与线程篇）

4、flex 布局
    父级： 
        /*flex 布局*/
        display: flex;
        /*实现垂直居中*/
        align-items: center;
        /*实现水平居中*/
        justify-content: center;

再加一种水平方居中的方式 ：margin-left : 50% ; transform: translateX(-50%);

效果图（不会截取网页gif动图[捂脸]）

另外写了一个效果拼图

步骤如下：

一、每一张图片放在一个div中，然后用另一个div容器包裹了所有的图片div。

html代码：

<!------------ 第六个图片盒子开始 ------------><div class="box6">

<div class="item"><img src="./images/mi1.jpg" alt="" /></div>