弹性盒模型

弹性盒模型：display:flex

父元素里的属性：
    1.display:flex;设置弹性盒模型
    2.flex-direction 设置弹性盒模型的主轴方向
    取值：
        row(默认值)，从左到右
        row-reverse 从右到左
        column 垂直排列，从上到下
        column-reverse 从下到上
    
    3.justify-content：设置(主轴的对齐方式)
    取值：
        flex-strat:顶端对齐
        flex-end:末端对齐
        center:居中对齐
        space-between:两端对齐，把多余的空间平分给子元素与子元素之间
        space-around:自动分配 把多余的空间平均分给子元素两边
    
    4.align-items(侧轴对齐方式)一般作用在侧轴为一行的情况
    取值：
        flex-start 侧轴顶端对齐
        flex-end    侧轴末端对齐
        center    居中对齐
        baseline
    
    5.flex-wrap:设置是否换行    
    取值：
        wrap 换行
        nowrap 不换行（默认值）
        wrap-reverse 反转换行
    
    6.align-content(行与行之间对齐方式)侧轴存在多行的情况下，实现侧轴的对齐方式
    取值：
        flex-start 侧轴的顶端对齐
        flex-end     侧轴的末端对齐
        center:居中对齐
        space-between:两端对齐，多余平分给行与行之间
        space-around 把多余的部分给行的上下

    

子元素里的属性：
    7.align-self:对子元素侧轴方向的拉伸
    取值：
        stretch 拉伸 当子元素的侧轴没有设置高度或者宽度的情况下，会拉伸为父元素的宽度或高度
        center 位于容器的中心  子元素宽高有固定的值，子元素在侧轴的对齐居中对齐
        flex-start:在侧轴的顶端
        flex-end:在侧轴的末端