给父元素添加的属性

    主轴：X轴

    侧轴：Y轴

    1. display:flex/inline-flex 设置元素为弹性盒子容器
      1.              1. 元素如果设置了弹性盒子，只会影响子元素的布局，对孙子元素没有影响
      2.              2. 子元素的clear , float , vertical-align都会失效
    2. flex-wrap: 子元素在主轴上是否换行
      1.              1. nowrap 不换行（默认）
      2.              2. wrap 换行
      3.              3. wrap-reverse 换行并且下一行相对上一行排列方向反向
    3. flex-direction: 主轴的方向
      1.              1. row 水平方向 从左到右 （默认）
      2.              2. colum 垂直方向 从上到下
      3.              3. row-reverse 水平方向 从右到左
      4.              4. colum-reverse 垂直方向 从下到上
    4. justify-content： 子项在主轴上的对齐方式
      1.              1. flex-start 项目在主轴的开始位置排列（默认）
      2.              2. flex-end 项目在主轴的结束位置排列
      3.              3. center 项目在主轴的居中位置排列
      4.              4. space-between 元素两边没有间隙，中间间隙平分
      5.              5. space-around 元素两边有间隙，中间的间隙是两边的两倍
      6.              6. space-evenly 所有间隙平分
    5. align-items ：子项在侧轴的对齐方式
      1.              1. stretch 项目在侧轴拉伸 (默认)
      2.              2. flex-start 项目在侧轴的开始位置排列
      3.              3. flex-end 项目在侧轴的结束位置排列
      4.              4. center 项目在侧轴的居中位置排列
      5.              5. baseline 项目在侧轴的基线位置排列
    6. align-content： 多行项目在侧轴的对齐方式

    ( !impotant 需要给弹性盒加flex-wrap:wrap/wrap-reverse )

    1.                 1. flex-start 多行项目在侧轴的开始位置对齐
    2.                 2. flex-end 多行项目在侧轴的结束位置对齐
    3.                 3. space-between 元素两边没有间隙，中间间隙平分
    4.                 4. space-around 元素两边有间隙，中间的间隙是两边的两倍

    子元素在弹性盒中自己单独位置的设置方法：

    align-self：子元素单独在侧轴上的对齐方式

    flex-start 顶部对齐

    flex-end 底部对齐

    center 居中对齐

    baseline 基线对齐（需要两个以上子元素同时设置才能看出效果）

    auto 自动（默认效果，跟随父元素的侧轴对齐方式）

    flex-grow 伸缩项目的比例

    元素默认的伸缩比例默认为0，意为不伸缩；

    意思是当子元素的宽度加起来不足父元素宽度时，会按照各个子元素flex-grow的值按比例将剩余空间分给对应的子元素，将子元素宽度拓宽充满整个父元素宽度；

    flex-shrink 项目的收缩比例

    元素默认的收缩比例为0，意为不收缩；

    意思是当子元素的宽度加起来超出父元素宽度时，如果没有设置flex-shrink，那么子元素就会溢出父元素，当设置了flex-shrink值后，设置了该值的子元素会按照flex-shrink值所占的比例收缩超出父元素的宽度部分；

    flex-basis 元素在主轴的基准值（当主轴在X轴上时决定的是宽度，在Y轴上时决定高度）

    auto 默认

    数值

    百分比

    一个伸缩项目 宽度/高度 和 flex-basis 都没有设置，该元素的宽度由内容决定

    一个伸缩项目 宽度/高度 和 flex-basis 都有数值 该元素的宽度由flex-basis决定

    一个伸缩项目 宽度/高度 和 flex-basis 只有一个有值 该元素的宽度由有值的决定；

    order：弹性盒内子元素排列顺序的属性；

    order:属性值

    属性值越小，排列越靠前；

    flex的简写

    flex: flex-grow flex-shrink flex-basis

    如果只写一个值：

    flex:1

    代表：

    flex-grow:1

    flex-shrink:1

    flex-basis:0%

    子元素平分空间

    flex:auto

    代表

    flex-grow:1

    flex-shrink:1

    flex-basis:auto