弹性盒子的学习

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     子项目两侧的距离相等,他们之间的距离两倍于它们与主轴起始或末尾位置的距离