flex布局

一、什么是flex布局?

flex布局就是弹性布局，用来为盒装模型提供最大的灵活性。任何元素都能指定为Flex布局（行内元素，行内块，块级元素），webkit内核的浏览器，需要加上-webkit前缀，

设为flex布局后，子元素的float、clear、和vertical-align属性将都失效

二、容器的属性

1、flex-direction：决定项目排列的方向

           

    属性值 row(默认值)：主轴为水平方向，起点在左端；

               row-reverse：主轴为水平方向，起点在右端；

                column:主轴为垂直方向，起点在顶部；

                column-reverse:主轴为垂直方向，起点在底部

2、flex-wrap属性：所有项目都排在一条轴上，如果排不开，如何换行

      属性值： nowrap：（默认）不换行

        

                wrap：换行，第一行在上方

            

            wrap-reverse:换行，第一行在下边

            

3、flexf-low属性:flex-direction属性和flex-wrap属性的简写形式

    flex-flow:row  wrap;（默认值）

4、justify-content属性

              

    属性值 row(默认值)：主轴为水平方向，起点在左端；


    flex-start(默认值)：左对齐；

    flex-end:右对齐；

    center:居中；

    space-between：两端对齐，项目之间的间隔都相等；

    space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

    属性值 row(默认值)：主轴为水平方向，起点在左端；

    flex-start(默认值)：左对齐；