Fork me on GitHub

CSS Flex弹性布局

flex弹性布局简介(flexible box)。

基本概念

采用flex布局的元素叫做 “容器” ,该元素(容器)内的所有子元素叫做 “项目”。沿着flex元素放置方向延伸的轴(比如页面上横向的行,纵向的列)被称为 “主轴” ,该轴的开始和结束分别称为 main startmain end。相反的,垂直于flex元素放置方向上的轴被称为 “交叉轴” 或 “横轴”,该轴的开始和结束分别称为 cross startcross end

所有标签中的文本节点也可以当做项目来进行 flex 布局,即标签作为容器,文本作为项目。

兼容性

Chrome Firefox Opera Safari IE
21+ 22+ 12.1+ 6.1+ 10+

使用方式

给要应用 flex 布局的元素设置 display:flexdisplay:inline-flex 属性。由于兼容性问题,webkit内核的浏览器需加上 -webkit- 前缀。

1
2
3
4
.box {
display: -webkit-flex;
display: flex;
}

容器属性

容器属性有6个可以设置。分别是:

1
2
3
4
5
6
1. flex-direction
2. flex-wrap
3. flex-flow
4. justify-content
5. align-items
6. align-content

flex-direction属性

规定主轴的方向,即设置项目在容器里的排列方向。

可选值 描述
row (默认),主轴方向 水平从左向右,即项目依次从左向右排列
row-reverse 主轴方向 水平从左向右,即项目依次从右向左排列
column 主轴方向 垂直从上到下,即项目依次从上到下排列
column-reverse 主轴方向 垂直从下到上,即项目从下往上排列

flex-wrap属性

规定当项目在主轴方向上无法放下时,是否换行。

可选值 描述
no-wrap (默认),不换行
wrap 换行,依次从上到下排列(主轴水平)
wrap-reverse 换行,第一行在下方,即从下到上换行

flex-flow属性

flex-directionflex-wrap 的简写属性。

可选值 描述
row no-wrap (默认),主轴从左到右,不换行。第一个值为 flex-direction 属性值
第二个值为 flex-wrap 属性值

justify-content属性

规定项目在主轴方向上的对齐方式。

可选值 描述
flex-start (默认),项目向主轴的开始处(main start)对齐
flex-end 项目向主轴的结束处(main end)对齐
center 项目在主轴方向上居中对齐
space-between 项目在主轴方向上均匀分布排列,即项目之间留出空间,但项目与容器边缘不留空间
space-around 项目在主轴方向均匀分布,不但项目与项目之间有间隙,项目与容器边缘也会有间隙

align-items属性

规定项目在交叉轴上的对齐方式。

可选值 描述
stretch (默认),项目不设置高度或为 auto 时,将占满整个容器的高度
flex-start 向交叉轴的起点对齐
flex-end 向交叉轴的终点对齐
center 项目在交叉轴上居中对齐
baseline 向项目的第一行文字的基线对齐

align-content属性

规定多根轴线的对齐方式,如果项目只有一个轴线,该属性不起作用。即有多个主轴时,控制主轴在交叉轴上的对齐方式,把一条轴线上的项目作为一个整体进行对齐。

可选值 描述
stretch (默认),在交叉轴上伸张,拉伸,即占满整个交叉轴
flex-start 与交叉轴的起点对齐
flex-end 与交叉轴的终点对齐
center 在交叉轴上居中对齐
space-between 与交叉轴两端对齐,轴线之间均匀分布
space-around 每根轴线的两侧都相等

项目属性

项目属性有6个可以设置,分别为:

1
2
3
4
5
6
1. order
2. flex-grow
3. flex-shrink
4. flex-basis
5. flex
6. align-self

order属性

规定项目的排列顺序。

整数值,默认为 0 ,数值越小越靠前排列。

1
2
3
.item {
order : 1;
}

flex-grow属性

规定项目的放大比例。

项目在容器中的占据位置比例值。整数值,默认为0,即容器存在多余的空间也不放大。当值大于0时,就按相应的倍数放大。

比如,主轴上有两个项目,分别设置两个项目 flex-grow: 1 。则表示两个项目各占据主轴空间 1/2。

1
2
3
4
5
6
.left {
flex-grow: 1;
}
.right {
flex-grow: 1;
}

又比如,主轴上有两个项目,分别设置 flex-grow 如下,则表示 .left 项目占据主轴的全部剩余空间。

1
2
3
4
5
6
.left {
flex-grow: 1;
}
.right {
flex-grow: 0; /* 0 是默认值*/
}

flex-shrink属性

规定项目的缩小比例。

整数值,默认为 1 ,即当容器变小时,项目会按比例缩小。该值不可取负值。

1
2
3
.item {
flex-shrink: 1;
}

flex-basis属性

规定分配多余空间之前,设置项目占据的固定主轴空间(项目的固定宽度)。

可选值是 widthheight 能设置的值。

1
2
3
.item {
flex-basis: 100px;
}

flex属性

flex-grow , flex-shrinkflex-basis 的简写属性。

默认值:0 1 auto
该属性有两个快捷值:auto (1 1 auto) , none (0 0 auto)
例:

1
2
3
4
5
/* 放大,缩小*/
flex: auto;

/*不放大,不缩小*/
flex: none;

align-self属性

控制具体的单个项目在交叉轴上的对齐方式。

可选值 描述
stretch (默认),项目不设置高度或为 auto 时,将占满整个容器的高度
flex-start 向交叉轴的起点对齐
flex-end 向交叉轴的终点对齐
center 在交叉轴上居中对齐
baseline 与项目的第一行文字的基线对齐
0%