flex布局

Cris

1、基本概念
1)Flex布局元素称为Flex 容器,子元素称为Flex项目;
2)容器存在两根轴:主轴main axis(默认是水平方向)和交叉轴cross axis(默认是垂直方向);
3)任何一个容器都可以指定为flex布局:

  1. 块元素:display:flex;
  2. 行内元素:display:inline-flex;

2、容器属性
1)flex-direction
作用:项目在主轴上的排列方向
取值:row(默认值) row-reverse column column-reverse

2)flex-wrap
作用:容器空间不够时,是否允许项目换行
取值:nowrap(默认值) wrap wrap-reverse

3)justify-content
作用:项目在主轴上的对齐方式
取值:flex-start(默认值) flex-end center space-between space-around

4)align-items
作用:项目在交叉轴上的对齐方式
取值:flex-start flex-end center stretch(默认值) baseline

5)align-content
作用:有多根轴线时,在交叉轴上的对齐方式(因此只有当flex-wrap:wrap wrap-reverse才生效)
取值:flex-start flex-end center space-between space-around stretch(默认值)

6) flex-flow
flex-flow 是 flex-direction 和 flex-wrap 两个属性的简写,默认值为row nowrap。

3、项目属性
1)flex-grow
作用:项目的放大比例,默认值为0,即容器存在剩余空间也不放大

2) flex-shrink
作用:项目的缩小比例,默认值为1,即容器空间不足时项目将缩小

3) flex-basis (这里约定主轴方向为row)
作用:content –> width –> flex-basis (limted by max|min-width)
http://gedd.ski/post/the-diff...

4)flex
作用:flex-grow flex-shrink和flex-basis的简写
flex:1 (等分布局)
https://developer.mozilla.org...

5)order
作用:定义了项目在容器中的排列顺序,数值越小,排列越靠前,默认值为0,在HTML中即使-2,-1的item排在后面,但是由于设置了order,使之排在了前面

6)align-self
作用:允许单个项目有与其他项目在交叉轴上不一样的对齐方式,优先级高于align-content
取值:auto(默认值)flex-start flex-end center baseline stretch

4、实战演练
1)等分布局:所有子项目flex:1
2)水平垂直居中:容器的justify-content和align-items属性设置为center

参考链接:
http://gedd.ski/post/the-diff...
https://developer.mozilla.org...

阅读 1.3k
36 声望
0 粉丝
0 条评论
36 声望
0 粉丝
文章目录
宣传栏