注意,设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效。

1
2
3

CSS3 弹性盒子内容

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
弹性容器内包含了一个或多个弹性子元素。
注意: 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。

弹性盒子属性

placeholder

弹性容器属性

1、flex-direction属性

flex-direction属性决定主轴的方向(即项目的排列方向)。

.box { flex-direction: row | row-reverse | column | column-reverse; }

1
2
3
4
5
1
2
3
4
5
1
2
3
1
2
3

2、flex-wrap属性

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

.box { flex-wrap: nowrap | wrap | wrap-reverse; }

nowrap(默认):不换行。

1
2
3
4
5
6
7
8
9
10

wrap:换行,第一行在上方。

1
2
3
4
5
6
7
8
9
10

wrap-reverse:换行,第一行在下方。

1
2
3
4
5
6
7
8
9
10

3、flex-flow 属性

flex-flow属性是 flex-direction 属性和 flex-wrap 属性的简写形式,可以同时定义主轴和侧轴,默认值为 row nowrap。

4、justify-content 属性

justify-content 属性设置子元素在主轴(横轴)方向上的对齐方式。

.box { justify-content: flex-start | flex-end | center | space-between | space-around ; }

flex-start(默认值):左对齐

1
2
3

flex-end:右对齐

1
2
3

center: 居中对齐

1
2
3

space-between:两端对齐,项目之间的间隔都相等。

1
2
3

space-around:子元素两侧的间隔相等。所以,子元素之间的间隔比子元素与边框的间隔大一倍。

1
2
3

5、align-items 属性

align-items 设置或检索弹性盒子元素在侧轴(纵轴)方向上的对齐方式。

.box { align-items: flex-start | flex-end | center | baseline | stretch ; }

flex-start:侧轴(纵轴)起点对齐。

1
2
3
4
5

flex-end:侧轴(纵轴)终点对齐。

1
2
3
4
5

center:侧轴(纵轴)居中对齐。

1
2
3
4
5

baseline:第一行文字的基线对齐。

1
2
3
4
5

stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。

1
2
3
4
5

6、align-content 属性

align-content 属性设置多根轴线的对齐方式(修改 flex-wrap 属性的行为)。

.box { align-content: flex-start | flex-end | center | space-between | space-around | stretch ; }

flex-start:各行在侧轴(纵轴)起点对齐。

1
2
3
4
5
6
7
8
9

flex-end:各行在侧轴(纵轴)终点对齐。

1
2
3
4
5
6
7
8
9

center:各行在侧轴(纵轴)居中对齐。

1
2
3
4
5
6
7
8
9

space-between:两端对齐。各行在弹性盒容器中平均分布,两端子元素对齐边线。

1
2
3
4
5
6
7
8
9
10

space-around:各行在弹性盒容器中平均分布,两端保留子元素之间间距大小的一半。

1
2
3
4
5
6
7
8
9
10
11

默认。各行将会伸展以占用剩余的空间。

1
2
3
4
5
6
7
8
9
10
11

弹性子元素属性

(1)、order 排序

order属性定义子元素的排列顺序。数值越小,排列越靠前,默认为0。

1order:4
2
3
4order:-1

(2)、align-self 属性

align-self 属性用于设置弹性子元素在侧轴(纵轴)方向上的对齐方式。

.item{ align-self: auto | flex-start | flex-end | center | baseline | stretch ; }

以下实例演示了弹性子元素上 align-self 不同值的应用效果:
flex-start
flex-end
center
baseline
stretch

(3)、flex-grow 属性

flex-grow属性设置弹性子元素放大比例,默认为0,即如果存在剩余空间,也不放大。

.item { flex-grow: number; }

flex-grow: 1
flex-grow: 1
flex-grow: 1
flex-grow: 1
flex-grow: 2
flex-grow: 1

(4)、flex-shrink 属性

flex-shrink属性设置弹性子元素的缩小比例,默认为1,即如果空间不足,该项目将缩小。

.item { flex-shrink: number; }

flex-shrink: 1
flex-shrink: 1
flex-shrink: 1
flex-shrink: 1
flex-shrink: 0
flex-shrink: 1

(5)、flex-basis 属性

flex-basis属性定义弹性盒子元素的默认基准值。

.item { flex-basis: length | auto; }

1
2
3

(6)、flex 属性

flex 属性用于指定弹性子元素如何分配空间。是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。

.item { flex:none | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ] ; }

1
2
3