flex弹性布局

        网页布局是css的一个重要应用，以前的布局方法（基于盒子模型），采用浮动（float）、定位（position）和display属性去布局，难以实现如垂直居中这样的效果。而新增的flex布局方式可以更简便，灵活的处理这种布局。

1.什么是flex布局？
        flex是flex box的缩写，意为“弹性布局”，使容器拥有更灵活的布局方式
        任意一个容器都可以设置成flex布局

.box{
    display:flex;
}

【注意】：设置为flex布局后，子元素的float、clear和vertical-align属性都会失效。

2.flex布局的概念
        容器（container）：设置flex布局的盒子；项目（item）：flex布局盒子的第一级子项
        弹性布局默认有两根轴，水平主轴（main axis）和垂直主轴（cross axis）
        概念示意图如下：

 3.flex的容器属性
        1）flex-direction：主轴的方向（项目排列的方向），有四个值

.box{
    flex-direction: row | row-reverse | column | column-reverse
}

                                row：默认，主轴为水平方向，起点在左侧
                column：主轴为垂直方向，起点在上沿
                row-reverse：主轴为水平方向，起点在右侧
                column-reverse：主轴为垂直方向，起点在下沿

        2）flex-wrap：换行的方式（当项目排不下时）

.box{
    flex-wrap: nowrap | wrap | wrap-reverse;
}

                nowrap：默认，不换行
                wrap：换行，第一行在上面
                wrap-reverse：换行，第一行在下面

        3）justify-content：项目在主轴上的对齐方式
                flex-start：起点对齐
                flex-end：终点对齐
                center：居中对齐
                space-between：两端对齐
                space-around：间隔对齐
                space-evenly：均匀对齐