简述弹性盒子 flex 布局css属性

caniuse 查询兼容性网站

兼容情况

IE10 及以上、ios9 及以上、android4.4 及以上版本支持

给父元素添加display：flex ，子元素可以自动的挤压或拉伸
如果不给子元素设置宽高，则子元素的宽高由内容撑开

使用justify-content调节元素在主轴的对齐方式
属性：flex-start  默认值，期待你开始依次排列
          flex-end  终点开始依次排列
          center   沿主轴居中排列 
          space-around   弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧。（子元素之间的距离，是父元素的两倍）
          space-between  弹性盒子沿主轴均匀排列，空白间均分在相邻盒子之间。（间距在盒子之间）
          Space-evenly   弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等。（所有间距都相等）
 
flex:1  等比例分掉父元素的区域

侧轴对齐方式：使用align-items调节元素在侧轴的对齐方式（给容器）
       flex-start  起点开始依次排列   
       flex-end  终点开始依次排列
       center    沿侧轴居中排列
       stretch    默认值  沿着主轴盒子沿着主轴线拉伸至铺满容器

使用flex-direction 改变元素排列方        主轴默认水平方向，侧轴默认是垂直方向
        flex-direction  
       row   行，水平（默认值）
       column  列，垂直
       row-reverse  行，从左向右
       column-reverse  列，从下向上

弹性布局换行 ：flex-wrap   wrap  默认不换行 nowrap 
            flex-wrap: wrap;

            /* 设置多行情况下的侧轴对齐方式 */
            /* 侧轴居中对齐 */
            align-content: center;
            /* 上面对齐 */
            align-content: flex-start;
            /* 下对齐 */
            align-content: flex-end;
            /*  */
            align-content: space-around;
            /* 两边不留空白 */
            align-content: space-between;
            /*  */
            align-content: stretch;