CSS之Flex弹性布局

—flex弹性布局实现水平垂直居中
父盒子display:flex; 子盒子margin:auto;

概念： 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

父容器(display:flex)属性：

    1.flex-direction ： 规定子元素的排列方向
        row（默认值）：主轴为水平方向，起点在最左端。
        row-reverse：主轴为水平方向，起点在最右端。
        column：主轴为垂直方向，起点在最上沿。
        column-reverse：主轴为垂直方向，起点在最下沿。

    2.flex-wrap ： 
        nowrap (默认值) : 单行显示，不换行
        wrap :  宽度不足换行显示
        wrap-reverse ： 宽度不足换行显示，但是从下往上显示(原本前面的盒子跑到最下层显示)

        说明： 
        a.默认单行显示不换行，当盒子过多父盒子宽度不足时，会自动调整子盒子宽度，直至内容过多无法调整最终一行内溢出。

    3.flex-flow : flex-direction与flex-wrap的组合写法，第一个表示direction第二个表示wrap，中间用空格分隔

    4.justify-content ： 决定了主轴方向上子项的对齐和分布方式(类似于word中的对齐排版)
        flex-start（默认值）：左对齐
        flex-end：右对齐
        center： 居中
        space-between：两端对齐，项目之间的间隔都相等。
        space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。


    5.align-items ： 定义项目在 交叉轴/侧轴 上如何对齐
        flex-start：交叉轴的起点对齐。
        flex-end：交叉轴的终点对齐。
        center：交叉轴的中点对齐。
        baseline: 项目的第一行文字的基线对齐。
        stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

        说明： a.容器里的项目若不设置固定高度则由于align-items默认为stretch,
                视觉上会导致项目默认高度是撑满整个容器的，即100%。
                可通过设置项目固定高度或改变align-items的值来解决

              b.关于主轴和侧轴，我的理解为水平和垂直 或 垂直和水平。即
                    主轴代表水平方向那侧轴就代表垂直方向，反之亦然


    6.align-content ： 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用
        flex-start：表现为起始对齐
        flex-end：表现为结束位置对齐
        center：表现为居中对齐
        space-between：表现为两端对齐，轴线之间的间隔平均分布。
        space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
        space-evenly：每一行元素都完全上下等分。
        stretch（默认值）：轴线占满整个交叉轴。

        说明：关于align-items和align-cotent容易混淆：
                前者多用于item在主轴上只有一行，而后者多用于item在主轴上存在多行.
                且在items由于容器宽度不足换行时，上下两个item之间会产生一大片间距，可通过align-content解决

子容器属性：
    1.order ： 定义项目的排列顺序。数值越小，排列越靠前，默认为0。

    2.flex-grow ： 用于设置 item 在主轴方向上的拉伸系数，即如果 flex 容器还有剩余空间，会按照各 item 
                   设置的拉伸系数拉伸item长度。默认值为 0，即不拉伸。

                   个人理解：
                        拉伸系数 * 容器主轴方向上空白长度 = 该item拉伸的长度

                        或 几个item拉伸系数为1 2 1，则按1:2:1的比例拉伸item以平分主轴方向上空白长度


    3.flex-shrink ： 用于设置 item 在主轴方向上的收缩因子，跟 flex-grow 刚好反着来，默认
                     为1，值越大收缩倍数越大，0 表示不收缩，负值无效。
                     另外，如果设置了换行属性，那么这个就无效了。

    4.flex-basis ： 用于设置 items 在主轴方向的大小，如果主轴是水平方向，相当于设置 width，此时，该属性值会覆盖掉
                    width 设置的大小。

                    取值： flex-basis: <'width'> | auto(默认值)

    5.flex ：  flex-grow，flex-shrink，flex-basis 三个属性的简化使用

    6.align-self ： 用于给单个 item 设置交叉轴方向上的排版布局方式，属性值和作用跟 align-items 一样，区别仅在于 
                    align-items 是 flex 容器的属性，它会作用于所有的 items 上；而 align-self 允许对单个 item 设置，该值会覆盖 align-items 设置的属性值。