flex布局（弹性布局）

一、传统布局的优缺点：

        1、兼容性好

        2、布局繁琐

        3、局限性，不能在移动端很好的布局

二、flex布局的优缺点：

        1、操作方便，布局即为简单，移动端应用广泛

        2、PC段浏览器支持情况较差

        3、Ie 11或更低版本，不支持或仅部分支持

三、flex布局原理

        flex：首先是任何一个都可以指定为弹性布局

        1、当我们父盒子设为flex布局以后，子元素的dloat、clear和vetical-align属性将时效

        2、伸缩布局=弹性布局=flex布局

        总结原理：就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

四、常见的容器属性

以下6个属性设置在容器上。

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

4.1、flex-direction属性决定主轴的方向（即项目的排列方向）。

.box {
  flex-direction: row 、 row-reverse 、 column 、 column-reverse;
}

它可能有4个值。

• row（默认值）：主轴为水平方向，起点在左端。
• row-reverse：主轴为水平方向，起点在右端。
• column：主轴为垂直方向，起点在上沿。
• column-reverse：主轴为垂直方向，起点在下沿。

4.2 flex-wrap属性

默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义ÿ