h5css3弹性盒子

弹性盒子：
    老：display：box；
    新：display：flex；
    方向：flex-direction：
        横向正方向 row/横向反方向 row-reverse/纵向正方向 column/纵向反方向 column-reverse；
    横向对齐方式:justify-content
        左对齐：flex-start / 右对齐：flex-end / 居中对齐：center
        两端对齐：space-between  / 等间距对齐：space-around
    纵向对齐方式：align-items
        上对齐：flex-start / 下对齐：flex-end / 居中对齐：center
        等高（跟父级的高度一样）：stretch / 基线对齐（按照它的下边对齐）：baseline
    (注意：写align-items不能写align-content)
    纵向子元素对齐方式(行数>1)：align-content
        上对齐：flex-start / 下对齐：flex-end / 居中对齐：center
        两端对齐：space-between  / 等间距对齐：space-around
    子元素是否换行：flex-wrap
        换行：wrap / 不换行：nowrap
    方向跟换行的缩写：
        flex-flow: 方向（flex-direction） / 换行（flex-wrap）
子元素上的三个属性：
        扩展空间： flex-grow（总共写了多少，然后对剩余空间进行划分）
        压缩空间：flex-shrink
        1份宽度 = (子元素总宽-容器宽)/总份数（每个元素占一份，flex-shrink：3 + 2）
        压缩后的空间 = 子元素宽 - 1份宽度 * 份数
        宽度：flex-basis （优先级高于width，会覆盖width的样式）
    缩写：
        flex: flex-grow 扩展空间  flex-shrink 压缩空间  flex-basis 宽度  (注意，必须按照顺序来)
        顺序：order
                值越小越靠前，越大越靠后
        单独样式：align-self