display设置为flex时
justify-content：flex-start；//开始对齐
justify-content：flex-end；//结尾对齐
justify-content：center；//中心对齐
justify-content：space-between；//两端对齐
justify-content：space-around；//自动分配间隔
justify-content：center；//中心对齐
flex-direction 主轴
flex-direction：row； （默认）依次排列（横向）
flex-direction：column；垂直排列
flex容器默认不换行
flex-wrap:wrap 第一行元素放不下时，第二行元素就会从这一行开始
flex-wrap:wrap-reverse 第一行元素放不下时，就会跑到第一行上面
水平垂直居中：
justify-content：center；//中心对齐
align-items：center；//中心对齐
扩展比率（flex-grow）父元素剩余元素的瓜分比列：
flex-grow：数字比例； //比例
flex-shrink（元素的多余空间削减比例）：
flex-shrink：数字比例； //比例
原文：https://www.cnblogs.com/xiaoxuJS/p/14607698.html