CSS3-弹性布局:flex

Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。

浏览器支持情况:

Edge 12+( IE10、IE11对于Flex实现存在大量bug, 不建议使用

Firefox 28+(

Chrome 29+(

Safari 9+( (-webkit-) Safari6.1+(

Opera 17+(

IOS 9.0+ (iPhone 6s)( (-webkit-) IOS7.0+ (iPhone 5s)(

Android 4.4+(

第一部分:容器的属性


1. flex-direction 属性

决定主轴的方向(即项目item的排列方向)。

flex-direction:
	row (默认值,主轴为水平方向,起点在左端。) |
	row-reverse (主轴为水平方向,起点在右端。) |
	column (主轴为垂直方向,起点在上沿。) |
	column-reverse (主轴为垂直方向,起点在下沿。);
flex-direction: row;(默认值,主轴为水平方向,起点在左端。)
box1
box2
box3-long
box4
flex-direction: row-reverse;(主轴为水平方向,起点在右端。)
box1
box2
box3-long
box4

2. flex-wrap 属性

默认情况下,项目item都排在一条线(又称"轴线")上。flex-wrap属性定义,如果一条轴线排不下,如何换行。

flex-wrap:
	nowrap (默认,不换行) |
	wrap (换行,第一行在上方) |
	wrap-reverse (换行,第一行在下方。) ;
flex-wrap: nowrap;(默认,不换行)
box1
box2
box3-long
box4
box5
box6
box7
box8
flex-wrap: wrap;(换行,第一行在上方)
box1
box2
box3-long
box4
box5
box6
box7
box8
flex-wrap: wrap-reverse;(换行,第一行在下方。)
box1
box2
box3-long
box4
box5
box6
box7
box8

3. flex-flow 属性

flex-flow 属性是 flex-direction 属性和 flex-wrap 属性的简写形式,默认值为 row nowrap

flex-flow: <flex-direction> || <flex-wrap>;
flex-flow: row-reverse wrap-reverse;
box1
box2
box3-long
box4
box5
box6
box7
box8

4. justify-content 属性

justify-content 属性定义了项目item在主轴上的对齐方式。它可能取5个值,具体对齐方式与轴的方向有关。下面假设主轴为从左到右。

justify-content:
	flex-start (默认值,左对齐)|
	flex-end (右对齐)|
	center (居中对齐)|
	space-between (两端对齐,第一个项目item位于起始位置,最后一个项目item位于末尾,剩余项目item平均分布,确保项目item之间的间隔都相等)|
	space-around (环绕对齐,每个项目item的两侧保持相同的间距,所以项目item之间的间隔比项目item与边框的间隔大一倍。);
justify-content: flex-start;(默认值,左对齐)
box1
box2
box3-long
justify-content: flex-end;(右对齐)
box1
box2
box3-long
justify-content: center;(居中对齐)
box1
box2
box3-long
justify-content: space-between;(两端对齐,第一个项目item位于起始位置,最后一个项目item位于末尾,剩余项目item平均分布,确保项目item之间的间隔都相等)
box1
box2
box3-long
justify-content: space-around;(环绕对齐,每个项目item的两侧保持相同的间距,所以项目item之间的间隔比项目item与边框的间隔大一倍。)
box1
box2
box3-long

5. align-items 属性

align-items 属性定义项目item在交叉轴上如何对齐。它可能取5个值。具体的对齐方式与交叉轴的方向有关,下面假设交叉轴从上到下。

align-items:
	flex-start (交叉轴的起点对齐)|
	flex-end (交叉轴的终点对齐)|
	center (交叉轴的中点对齐)|
	baseline (项目item的第一行文字的基线对齐)|
	stretch (默认值,如果项目item未设置高度或设为auto,将占满整个容器的高度);
align-items: flex-start;(交叉轴的起点对齐)
box1
box2
box3-long
align-items: flex-end;(交叉轴的终点对齐)
box1
box2
box3-long
align-items: center;(交叉轴的中点对齐)
box1
box2
box3-long
align-items: baseline;(项目item的第一行文字的基线对齐)
box1
box2
box3-long
align-items: stretch;(默认值,如果项目item未设置高度或设为auto,将占满整个容器的高度)
box1
box2
box3-long

6. align-content 属性

align-content 属性定义了多行情况下的对齐方式。如果项目item只有一行,该属性不起作用。

align-content:
	flex-start (与交叉轴的起点对齐)|
	flex-end (与交叉轴的终点对齐)|
	center (与交叉轴的中点对齐)|
	space-between (与交叉轴两端对齐,第一行项目item位于起始位置,最后一行项目item位于末尾,剩余行平均分布,确保每行项目item之间的间隔都相等)|
	space-around (与交叉轴环绕对齐,每行项目item的两侧保持相同的间距,所以每行项目item之间的间隔比项目item与边框的间隔大一倍。)|
	stretch (默认值,第一行从交叉轴的起点开始排列,其它行通过扩散间距占满整个交叉轴);
flex-wrap: wrap; align-content: flex-start;(与交叉轴的起点对齐)
box1
box2
box3-long
box4
box4
box5-long
box7
box8
box9-long
flex-wrap: wrap; align-content: flex-end;(与交叉轴的终点对齐)
box1
box2
box3-long
box4
box4
box5-long
box7
box8
box9-long
flex-wrap: wrap; align-content: center;(与交叉轴的中点对齐)
box1
box2
box3-long
box4
box4
box5-long
box7
box8
box9-long
flex-wrap: wrap; align-content: space-between;(与交叉轴两端对齐,第一个项目item位于起始位置,最后一个一行位于末尾,剩余项目item平均分行,确保项目item之间的间行相等)
box1
box2
box3-long
box4
box4
box5-long
box7
box8
box9-long
flex-wrap: wrap; align-content: space-around;(与交叉轴环绕对齐,每行项目item的两侧保持相同的间距,所以每行项目item之间的间隔比项目item与边框的间隔大一倍。)
box1
box2
box3-long
box4
box4
box5-long
box7
box8
box9-long
flex-wrap: wrap; align-content: stretch;(默认值,第一行从交叉轴的起点开始排列,其它行通过扩散间距占满整个交叉轴)
box1
box2
box3-long
box4
box4
box5-long
box7
box8
box9-long

第二部分:项目item的属性


1. order 属性

order: <integer>; 属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。

box1|order:0
box2|order:0
box3|order:0
box4|order:-1

2. flex-grow 属性

flex-grow: <number>; 属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。

如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。

box1:flex-grow:0;
box2:flex-grow:0;
box1:flex-grow:1;
box2:flex-grow:3;
box1:flex-grow:1;
box2:flex-grow:1;

3. flex-shrink 属性

flex-shrink: <number>; 属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。

如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。

box1:flex-shrink:1;
box2:flex-shrink:1;
box3:flex-shrink:1;
box4:flex-shrink:1;
box5:flex-shrink:1;
box6:flex-shrink:1;
box1:flex-shrink:0;
box2:flex-shrink:1;
box3:flex-shrink:1;
box4:flex-shrink:1;
box5:flex-shrink:1;
box6:flex-shrink:1;
box1:flex-shrink:0;
box2:flex-shrink:0;
box3:flex-shrink:1;
box4:flex-shrink:1;
box5:flex-shrink:1;
box6:flex-shrink:1;

4. flex-basis 属性

flex-basis: <length> | <percentage> | auto | content; 属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。

flex-basis:
	<length> (用长度值来定义宽度,就是跟width或height属性一样的值,比如350px,则项目将占据固定空间)|
	<percentage> (用百分比来定义宽度)|
	auto (默认值,即项目的本来大小)|
	content (基于内容自动计算宽度);
box1:flex-basis:400px;
box2:flex-basis:auto;
box3:flex-basis:auto;
box1:flex-basis:50%;
box2:flex-basis:25%;
box3:flex-basis:25%;

5. flex 属性

flex属性是flex-grow, flex-shrinkflex-basis的简写,默认值为0 1 auto。后两个属性可选。

该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。

box1:flex: 3 1 auto;
box2:flex: 1 1 auto;

6. align-self 属性

align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch

box1
box2
box3-long
box4:align-self:flex-end;

第三部分:案例应用


1. 侧栏宽度固定,主体自动伸展

main
主体自动伸展
aside
侧栏宽度固定

不折断

mainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmain

this is a good demo for flex layout! yes, it is! My name is a dev a test! Let's go go go! beautiful yes! you know me! let us fix it! let it beautiful!

aside
侧栏宽度固定

word-wrap: break-word;

mainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmain

this is a good demo for flex layout! yes, it is! My name is a dev a test! Let's go go go! beautiful yes! you know me! let us fix it! let it beautiful!

aside
侧栏宽度固定

word-break: break-all;

mainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmain

this is a good demo for flex layout! yes, it is! My name is a dev a test! Let's go go go! beautiful yes! you know me! let us fix it! let it beautiful!

aside
侧栏宽度固定

word-wrap: break-word; width: 0;

mainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmainmain

this is a good demo for flex layout! yes, it is! My name is a dev a test! Let's go go go! beautiful yes! you know me! let us fix it! let it beautiful!

aside
侧栏宽度固定