做为css布局的又一种新方式,Flex拥有极强的使用效果,相比原来的float,position对元素样式的操作更加简洁,本文是我的一点学习经验和心得吧,如有错误以及不足之处,请多多指点。
好进入正题吧,首先借用阮一峰大神的一副图片:
再来说说flex的几个属性吧:
一、容器属性
1.flex-direction
: row | row-reverse | column | column-reverse;
这个属性是定义元素在主轴上的排列顺序的,也就是上面的(main axis)
row:元素在主轴上以水平的方向排列的,起点在左端(同时,这个也是默认值)
row-reverse:元素在主轴上以水平的方向排列的,起点在右端
column:元素在主轴上以垂直的方向排列的,起点在上方
column-reverse:元素在主轴上以垂直的方向排列的,起点在下方
光说不练假把式,贴上代码:
效果如下:
2.flex-wrap:
nowrap | wrap | wrap-reverse;
这个属性是定义如果元素在一根轴线上排列不下后该如何排列:
nowrap:不换行(默认)
wrap :换行,并且第一行在上方
wrap-reverse:换行,第一行在下方,逆向排列
代码贴上:
效果如下:
3.flex-flow:
flex-flow
属性是
flex-direction
属性和
flex-wrap
属性的简写形式,默认值为
row nowrap
4.justify-content:
flex-start | flex-end | center | space-between | space-around
这个属性是定义元素在主轴上的对齐方式
flex-start:主轴的起点对齐(默认)
flex-end:主轴的终点对齐
center:主轴的中点对齐
space-between:俩端对齐,元素之间的间隔相等
space-around:元素的俩侧间隔相等,以元素及俩端为对齐方式
代码贴上:
效果如下:
5.align-items:
flex-start | flex-end | center | baseline | stretch
这个属性是相对justify-content来说的,他是规定元素在交叉轴上的对齐方式的
flex-start:交叉轴的起点对齐
flex-end:交叉轴的终点对齐
center:交叉轴的中点对齐
baseline:项目的第一行文字对齐
stretch:如果元素的高度没有设置或者设置为auto,则元素将占满容器的高度
贴上代码:
效果如下:
6.align-content:
flex-start | flex-end | center | space-between | space-around | stretch;
这个属性是规定有多根轴线时的对齐方式,如果只有一根轴线,不起作用
flex-start:与交叉轴的起点对齐
flex-end:与交叉轴的终点对齐
center:与交叉点的终点对齐
space-between:与交叉轴的俩端对齐,轴线之间的距离相等
space-around:每根轴线的俩侧距离相等
stretch:轴线占满整个交叉轴
二、元素属性
1.order:
<integer>
这个属性定义元素的排列顺序,数值越小,排列越靠前,默认是0
贴上代码:
结果如下:
2.flex-grow:
<number>
该属性定义元素放大比例,默认为0,0表示的是即使有剩余空间也不放大
如果所有的元素的这个值都为1,那么这些元素将等分剩余空间,如果其中有一个大于1的元素,那么这个元素占有的剩余空间比别的大N倍
贴上代码:
效果如下:
3.flex-shrink:
<number>
这个属性是定义元素的缩小比例,默认值为1,如果剩余空间不足,则元素缩小
如果所有元素的这个属性都为1时,当空间不足时,将等比例缩小。如果一个元素的这个属性为0,其余都为1,那么空间不足时,属性为0的元素不缩小
贴上代码:
效果如下:
注意:负值对该属性没有作用
4.flex-basis:
<length> | auto
这个属性定义在分配多余空间前,元素占主轴的大小,以此来计算主轴上是否还有多余空间,默认值为auto,也就是元素原本大小
5.flex:
none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
这个属性是
flex-grow
,
flex-shrink
和
flex-basis
的简写,默认值为(0 1 auto)
该属性有俩个快捷值:auto和none
贴上代码
效果如下:
对于这三个属性,我是这样理解的:flex-grow相当于一大堆地主,准备瓜分主轴的“土地”,但地主里面也有相对厉害的,比如属性值更高的,他就瓜分的土地多,
而flex-shrink相当于一群很好的朋友,互帮互助,主轴的“土地”不够的话,大家一起减少“土地”,但是里面却出现了一个恶霸,也就是属性值为0的,他不管这么多
在他看来,爱咋咋滴,没我事情。最后flex-basis相当于算账的,计算主轴剩余的“土地”还剩下多少,计算后,再让那俩个属性自己去分剩余的“土地”。
当然,flex也有缺点,就是他对于手机浏览器的兼容还没做到位,有些手机浏览器还不能辨识。