首页 > 代码库 > Flex布局的学习经验

Flex布局的学习经验

做为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-growflex-shrink 和 flex-basis的简写,默认值为(0 1 auto)

   该属性有俩个快捷值:auto和none

贴上代码

 技术分享

技术分享

效果如下:

技术分享

对于这三个属性,我是这样理解的:flex-grow相当于一大堆地主,准备瓜分主轴的“土地”,但地主里面也有相对厉害的,比如属性值更高的,他就瓜分的土地多,

flex-shrink相当于一群很好的朋友,互帮互助,主轴的“土地”不够的话,大家一起减少“土地”,但是里面却出现了一个恶霸,也就是属性值为0的,他不管这么多

在他看来,爱咋咋滴,没我事情。最后flex-basis相当于算账的,计算主轴剩余的“土地”还剩下多少,计算后,再让那俩个属性自己去分剩余的“土地”。

 

当然,flex也有缺点,就是他对于手机浏览器的兼容还没做到位,有些手机浏览器还不能辨识。

 

 

 

 

 

  

 

Flex布局的学习经验