flex 布局

父级元素属性：

    justify-content               子元素水平排列方式
        center:    居中
        space-between:    两端对齐
        space-around:    子元素拉手分布
        flex-start:        居左
        flex-end:        居右
    align-items            子元素垂直排列
        center:        居中
        flex-end:        底部
        flex-start:        开始
    align-content            多行的时候垂直排列
        center        居中
    flex-direction            排列方式
        row        横向排列
        row-reverse    横向翻过排列
        coloumn        纵向排列
        coloumn        纵向翻过排列
    flex-wrap:                子元素是否在一行显示
        no-wrap        不换行
        wrap        换行

子元素属性：
    flex:1        1指的是一个系数

    子元素在划分父元素宽度，先刨除固定宽度

    flex-grow:1    定义子元素放大比例

父元素外层包裹元素属性：

    position:fixed;
    left:0;
    bottom:0;
    width:100%;

非flex布局方式：实现上下左右居中

    父元素：    position:relative;
        height:500px;
        width:500px;
    
    子元素：     position:absolute;
        width:100px;
        height:100px;
        left:50%;
        top:50%;

        (margin-left:-50px;
        margin-top:-50px;)      === transfrom:translate(-50%,50%)