1.弹性盒子 | 弹性盒 | 伸缩布局 | 弹性盒模型
    概念：是一种布局模式，让元素有能力控制了元素的排序方式。
    语法：
    display：flex 弹性盒子 | inline-flex 行内弹性盒子

    2.容器身上的属性
    1.设置主轴方向
    flex-direction：row 行 | column 列 | row-reverse | column-reverse
    2.设置项目是否换行
    flex-wrap：nowrap | wrap 换行 | wrap-reverse；
    3.设置项目在主轴上的排列
    justify-content：flex-start 起点 | center 中间点 | flex-end 终点 | space-between 之间 | space-around 周围 | space-evenly 均分
    4.设置项目在侧轴上的排列
    align-items：stretch 拉伸 | flex-start | flex-end | center | baseline 基线
    注意：默认是拉伸铺满整个容器，如果项目设置了高度，就以高度为准。
    5.设置多根轴线的排序方式[单根轴无效！]
    align-content：stretch 拉伸 | flex-start 起点 | flex-end 终点 | center 中间点 | baseline 基线 | space-between 之间 | space-around 周围 | space-evenly 均分
    6.设置主轴方向和是否换行的复合属性[了解]
    flex-flow：flex-direction的值 flex-wrap的值；

    3.项目身上的属性
    1.放大项目
    flex-grow：0 不放大 | 任意非0数字代表放大；
    数字为1放大，其他数字按份数放大
    2.缩小项目
    flex-shrink：1会缩小 | 0不缩小 | 任意数字代表缩小份数；
    3.放缩的复合属性
    flex：flex-grow的值 flex-shrink的值 flex-basis的值；
    flex：1；代表 1 1 auto现在是1 1 0%；
    4.项目单独的对齐方式
    algin-self：stretch 拉伸 | flex-start | flex-end | center | baseline基线
    5.基准尺寸 = width
    flex-basis：px；
    6.*项目的顺序
    order：0 | 其他数字
    元素自带顺序0，从小到大的顺序排列。如果值一样按照代码顺序排列

    注意：如果一个元素设置了弹性盒子，float，clear，vertical-align都将失效哦！
    如果一个元素被设置成弹性盒子，也可以设置z-index属性！