第二遍回顾--①前端flex布局

1.flex: 弯曲，收缩

2.概念 2条主轴，main axis,cross axis; 每个单元为flex item，主轴空间main size，交叉轴空间cross size;

3.容器 

    .container{

　　　　display: flex    |    inline-flex;

    }

    块状元素用flex；行内元素用inline-flex;

    使用之后，子元素的float、clear、vertical-align属性会失效。

    a. flex-direction 决定主轴方向

        row 水平为主轴方向，起点在左端；(类似于左浮动)

        row-reverse 水平为主轴方向，起点在右端；(类似于右浮动)

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

        column-reverse 垂直为主轴方向，起点在底端；

    b. flex-wrap 决定容器内是否可换行

        wrap 换行，第一行在上面

        nowrap 不换行，自动调整宽度，显示在一行里面。

        wrap-reverse 换行，第一行在下面

    c. flex-flow 是flex-direction和flex-wrap的简写形式

    d. justify-content 定义了项目在主轴方向上的对齐方式

        flex-start 在主轴方向上头部对齐

        flex-end 在主轴方向上尾部对齐   

        center 在主轴方向上居中

        space-between 剩余空间在主轴方向上等分(优秀)

        space-around 每个项目的两端间隔相等(优秀)

    e. align-items 定义了项目在交叉轴上的对齐方式

        stretch（默认）如果item没有设置高度，就铺满容器

        flex-start 在交叉轴方向上，头部对齐(容易出效果)

        flex-end 在交叉轴方向上，尾部对齐(容易出效果)

        center 居中 交叉轴的中点对齐(容易出效果)

        baseline 以项目中的第一行文字的底部基线对齐

    f. align-content 定义了多根轴线的对齐方式(如果容器只有一根轴线，此属性将不起作用，当flex-warp: warp 时，可能会出现多条轴线，默认为stretch)

        (每条轴线的项目默认也是stretch,如果项目设置的高度优先级高于stretch。)

        flex-start 轴线在交叉轴的头部对齐

        flex-end 轴线在交叉轴的尾部对齐

        center 轴线在交叉轴的中间对齐

        space-between 剩余空间等分为间隙

        space-around 每个轴线两侧的距离相同

4. Flex的项目属性

    a. order 定义项目在容器内的排列顺序，数值越小越靠前，支持负数，默认为0。

    b. flex-basis 定义了在分配多余空间之前，项目占据的主轴空间(默认值auto，即取决于自定义的宽度和高度，如果水平方向为主轴，当设置后，项目自身的宽度失效。一般这个属性配合flex-grow,flex-shrink使用)

    c. flex-grow 定义项目的放大比例，默认是0，即存在剩余空间也不放大。如果都为1，则等分剩余空间。如果其中一个为2，别的为1，则比其他大一倍。

    d. flex-shrink 定义了项目的缩小比例，默认是1，即空间不足，该项目将缩小，负值无效。如果某个项目该属性为0，则空间不足时，它不缩小。

    e. align-self 定义当前项目的对齐方式，会覆盖align-items的设置，默认是auto，继承父级设置，如果没有父级，则为stretch。

        flex-start 

        flex-end

        center

        baseline

        stretch