我对flex布局的理解

未使用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;
//这样子就实现一个水平垂直居中了，高随意定
}
还可以去玩一下其他花样布局