display: flex; //将元素升级为弹性盒子
元素升级为弹性盒子后,子元素的float、clear、vertical-aligh都将失效
flex-direction //指定主轴的方向
row //子项目从左至右排序
row-reverse //子项目从右至左排序
column //主轴垂直,子项目从上到下排序
column-reverse //子项目从下到上排序
flex-wrap: nowrap 不换行 || wrap 正常换行 || wrap-reverse 换行,且前面的行在底部
flex-flow 是上面两个的简写
justify-content 主轴上子项目的对齐方式
flex-start 子项目起始位置于main start位置对齐
flex-end 子项目末尾位置与main end位置对齐
center 在主轴方向居中与容器
space-between 与交叉轴两端对齐,子项目之间的间隙全部相等
space-around 子项目两侧的距离相等,他们之间的距离两倍于它们与主轴起始或末尾位置的距离