css之弹性盒子

 flex(弹性盒，伸缩盒)

            - 是css中又一种高级的布局手段，主要就是用来替代浮动布局

            - flex布局通常是用于移动端，自适应布局

            - 通过display：flex； 就可以设置该元素为弹性盒，

            - 注意：一旦为元素设置了flex ， 该元素的clear  float  失效

            - 一旦开启了弹性布局，该弹性盒会自动产生两个方向轴

            - 主轴

            - 侧轴

            - 弹性容器：开启了flex属性的元素称作为弹性容器

            - 弹性容器的css属性：

                1、flex-direction 指定容器中元素的排列方式（更改主轴）

                    - row  默认值  弹性元素在容器中从左往右水平排列  -  主轴

                    - column  弹性元素在容器从上往下垂直排列 -  zhu'zhou

                2、flex-wrap  设置弹性元素是否在容器中自动换行

                    - nowrap  默认值 ，不会换行

                    - wrap    沿着侧轴换行

                3、 flex-flow 是flex-direction和 flex-wrap的简写形式

                4、 justify-content  设置弹性元素在主轴上的排列方式

                    - flex-start  沿着主轴排列 （默认值）

                    - flex-end    沿着主轴反方向排列

                    - center      主轴水平居中排列

                    - space-around  分配空白区域

                    - space-between  分配空白区域

                    - space-evenly   分配空白区域

                5、 align-items  元素在侧轴上的对齐方式，排列方式

                    - stretch 默认值  

                    - flex-start  沿着侧轴起点排列

                    - flex-end   沿着侧轴终点排列

                    - center     在侧轴上居中对齐

                    - baseline    基线对齐

                6、 align-content  分配侧轴元素之间的空白（注意该属性一定是 flex-wrap: wrap;  ）

                    -  flex-start

                    -  flex-end

                    -  center

                    -  space-between

                    -  space-around

            - 弹性元素（项目）

                - 弹性元素就是该弹性盒下的直接的子元素

                - 1、order  定义项目的排列顺序 ，值越小 越靠前，默认值都是0

                - 2、flex  指定盒子的伸缩

                - 3、align-self  用来覆盖当前元素上的align-items  ，指定单个元素在侧轴上对齐的方式

        注意：弹性元素，既可以作为弹性元素，也可以变成弹性容器