弹性布局（flex）是为盒装模型提供最大的灵活性， 容器添加弹性布局后，显示为块级元素；display:inline-flex; 容器添加弹性布局后，显示为行级元素；

        当设置成flex布局之后，子元素的float、clear和vertical-align属性将不会产生效果；    弹性布局之所以叫弹性布局，真的是因为他有弹性。元素可以根据屏幕的大小来改变自身的宽度，这是flex布局的一大特点。

         弹性布局中有两个基本方向：主轴，交叉轴； 

         主轴：是在弹性布局中通过属性规定水平或垂直方向的轴线：

          交叉轴：是在弹性布局中与主轴垂直的另一方向；

         弹性布局的使用离不开这两大轴线，我们改变元素的位置可以通过改变主轴和交叉轴，从而改变元素的位置。

justify-content：定义了主轴的对齐方式。属性有：center居中 flex-start（默认值）左对齐 flex-end右对齐；

           align-items定义了交叉轴的对齐方式。属性有：center交叉轴居中 flex-start交叉轴起点对齐 flex-end交叉轴终点对齐。