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