原理
    采用flex布局的元素称为flex容器其子元素称为flex项目
    通过给父盒子添加flex属性来控制子盒子的位置和排列方式

常见父项属性
    flex-direction
        主轴方向
    flex-wrap
        子元素是否换行
    flex-flow
        复合属性 = flex-direction + flex-wrap 
    align-content
        侧轴上的子元素排列方式（多行）
    align-items
        侧轴上的子元素排列方式（单行）
    justify-content
        主轴上的子元素排列方式

flex-direction
    row     
        从左到右
    row-reverse
        从右到左
    column
        从上到下
    column-reverse
        从下到上

justify-content
    flex-start
        从头部开始
    flex-end
        从尾部开始
    center
        在主轴居中对齐
    space-around
        平分剩余空间
    space-between
        先两边贴边再平分剩余空间

flex-wrap
    默认不换行，如果装不下，则缩小子元素
    wrap
    nowrap

align-items
    子项为单行可用
    flex-start
        从头部开始
    flex-end
        从尾部开始
    center
        在侧轴居中对齐
    stretch
        拉伸（默认）（子元素没有侧向长度时）

align-content
    子项为多行时可用（ wrap ）
    flex-start
        从头部开始
    flex-end
        从尾部开始
    center
        在侧轴居中对齐
    space-around
        平分剩余空间
    space-between
        先两边贴边再平分剩余空间