H5中弹性盒子布局

  * 全局(父元素上的属性)
    * 开启弹性布局
      * display:flex
        //注意:父元素开启弹性布局,子元素会默认水平排列,主轴方向为水平方向
    * 弹性布局的主轴位置方向
      * flex-derection:row/column/row-reverse/column-reverse
        //注意:           在父元素上开启弹性布局之后,并在父元素设置
        //row:            默认值 子元素排列会从左往右边(从左往右)
        //column          子元素垂直方向排序(从上往下)
        //row-reverse     子元素会倒叙排列(从右往左)
        //column-reverse  子元素会垂直倒叙排列(从下往上)
    * 子元素在主轴上的对齐方式
      * justify-content:flex-start/flex-end/center/space-around/space-between
        //注意:           父元素开启弹性布局,默认主轴为x轴,侧轴为y轴,当子元素垂直排列时,主轴为y轴,侧轴为x轴
        //flex-start      默认值 弹性盒子的开始位置
        //flex-end        弹性盒子的结束位置
        //center          居中
        //space-around    设置子元素平均分配父元素的剩余的距离,两端的距离是中间的一半
        //space-between   在子元素之间分配父元素的剩余空间
    * 子元素在侧轴的对齐方式
      * align-items:flex-start/flex-end/center
        //注意            父元素开启弹性布局,默认主轴为x轴,侧轴为y轴
        //flex-start      默认值 弹性盒子的开始位置
        //flex-end        弹性盒子的结束位置
        //center          居中
    * 弹性元素是否换行
      * flex-wrap:warp-reverse;
    * 弹性元素是否换行
      * flex-flow:row warp
    * 弹性元素在侧轴的位置分布(整体)
      * align-content:flex-end
  * 局部(子元素上的属性)
    * 弹性元素在侧轴的位置分布
      * align-self:flex-end
    * 子元素在主轴所占的分量
      * flex-grow: 1;
      //子元素分配父元素的剩余空间的内容
      //使用更多的为flex(flex属性是flex-grow, flex-shrink 和 flex-basis的简写)
    * 弹性元素在主轴的排序
      * order:1
    * 弹性元素的压缩率
      * flex-shrink:1