未使用flex布局的时候,对元素操作比较麻烦,就拿元素居中来说,需要写一大堆css相当难受,而使用flex几行css属性就能解决,而且对里面元素操作也是相当方便. 主轴相当于坐标系x轴，交叉轴相当于坐标系y
认识flex之前首先得知道它的一些默认行为.
默认子元素排列不换行, 子元素高100%,宽0%跟常规相反, 子元素主轴排列从左往右, 子元素的float属性失效等
创建一个flex布局,首先选取一个容器添加个属性display:flex； 这个容器支持属性:
flex-direction flex-wrap justify-content align-items align-content
flex-direction(改变主轴的方向)
row(默认) 下图第三个 row-reverse(主轴位于x轴,排列从右往左开始) 下图第四个 column(主轴位于y轴这个方向,从上往下) 下图第二个 column-reverse(从下往上); 下图第一个
flex-wrap(改变子元素换行)
nowrap(默认) wrap(换行) wrap-reverse(换行并且子元素反排列);
justify-content (改变子元素主轴排列方式)
flex-start(紧靠容器主轴排列 默认) flex-end(紧靠容器主轴尾部排列) flex-center(容器主轴居中排列) Space-between(紧靠容器两端均匀分布) space-around(均匀分布,不靠近容器两端)
align-items (改变子元素交叉轴排列方式)
flex-start(紧靠容器交叉轴排列 默认) flex-end(紧靠容器交叉轴尾部排列) flex-center(容器主轴居中排列)
align-content
flex-start(紧靠容器主轴排列 默认) flex-end(紧靠容器主轴尾部排列) flex-center(容器主轴居中排列) Space-between(紧靠容器两端均匀分布) space-around(均匀分布,不靠近容器两端) 后面两个属性必须是wrap生效以后的情况.;
容器支持的属性基本就这些 还有一些组合缩写就不放上去了; 容器有自己的属性,子元素也得有自己属性:
flex-shrink (子元素缩放,前提是空间不足时)
1(默认值) (当设置其他数值时缩放是按照比例缩放 例如: 1 2 3 要缩放6px 1/1+2+3 2/1+2+3 3/1+2+3 去乘6得出的元素缩放);
flex-grow (子元素扩大,前提是空间足够时)
0(默认值) (当设置其他数值时缩放是按照比例扩大 例如: 1 0 3 要多出4px 1/1+0+3 0/1+0+3 3/1+0+3 去乘6得出的元素扩大值);
order （子元素排放位置）
0(默认) (数字几就是排列元素位置第几个);
align-self （子元素）
flex-start(紧靠交叉轴起始位置)
flex-center(中间位置) flex-end(紧靠交叉轴结束位置)
flex（flex-grow,flex-shrink,flex-basis缩写)
0 1 auto(默认) 后面两个值可填可不填;
熟悉这些flex属性以后,试试水平垂直居中; .main{ //容器 display:flex; //然后交叉轴方向居中子元素 align-items:center; //主轴方向居中子元素 justify-content:center; //这样子就实现一个水平垂直居中了，高随意定 } 还可以去玩一下其他花样布局
