CSS3 中的 flex 属性，在布局方面做了非常大的改进，使得我们对多个元素之间的布局排列变得十分灵活，适应性非常强。其强大的伸缩性和自适应性，在网页开中可以发挥极大的作用。
# 基础介绍
我们在外层容器样式上添加 display: flex 后，此容器内的子组件就会遵循 flex 布局。下面的代码展示了两种布局方式，上方的为普通的流式布局，下面的是 flex 布局。
<html>
<body>
<h4>普通流式布局</h4>
<div class="box">
<div class="box-child red">1</div>
<div class="box-child green">2</div>
<div class="box-child orange">3</div>
<div class="box-child blue">4</div>
</div>
</body>
<style>
.box{
border: black 1px solid;
}
.box-child{
width: 100px;
height: 50px;
margin: 5px 5px 5px 5px;
text-align: center;
line-height: 50px;
font-size: 20px;
color: white;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
.orange {
background-color: orange;
}
.blue {
background-color: blue;
}
</style>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<html>
<body>
<h4>flex 布局</h4>
<div class="box flex">
<div class="box-child red">1</div>
<div class="box-child green">2</div>
<div class="box-child orange">3</div>
<div class="box-child blue">4</div>
</div>
</body>
<style>
.flex{
display: flex;
}
</style>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
我们可以看到当使用 flex 布局后原本竖向排列的子容器变成了横向排列，这个方向我们称之为主轴的方向，默认为从左往右排列，与主轴垂直的轴称为侧轴，默认为从上往下，我们可以通过 flex-direction 来改变默认的排列方向。
此外我们把带有 display: flex 或 display:inline-flex 声明的容器称为弹性盒子，弹性盒子内的子元素称之为弹性元素
# 弹性盒子
使用 display: flex 或 display:inline-flex 可以将一个父容器声明为弹性盒子，盒子内的元素遵循弹性布局。下面是弹性盒子的常用配置。
# flex-direction
用于改变弹性盒子中元素的排列方向，默认为从左向右
| 属性值 | 描述 |
|---|---|
| row | 从左到右排列子元素 (默认) |
| row-reverse | 从右向左排列子元素 |
| column | 从上到下排列子元素 |
| column-reverse | 从下到上排列子元素 |
<html>
<body>
<h4>row-reverse</h4>
<div class="box flex row-reverse">
<div class="box-child red">1</div>
<div class="box-child green">2</div>
<div class="box-child orange">3</div>
<div class="box-child blue">4</div>
</div>
</body>
<style>
.row-reverse{
flex-direction: row-reverse;
}
</style>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html>
<body>
<h4>column</h4>
<div class="box flex column">
<div class="box-child red">1</div>
<div class="box-child green">2</div>
<div class="box-child orange">3</div>
<div class="box-child blue">4</div>
</div>
</body>
<style>
.column{
flex-direction: column;
}
</style>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html>
<body>
<h4>column-reverse</h4>
<div class="box flex column-reverse">
<div class="box-child red">1</div>
<div class="box-child green">2</div>
<div class="box-child orange">3</div>
<div class="box-child blue">4</div>
</div>
</body>
<style>
.column-reverse{
flex-direction: column-reverse;
}
</style>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# flex-wrap
控制元素在一条轴线上排不下时的换行方式
| 属性值 | 描述 |
|---|---|
| nowrap | 不换行 (默认) |
| wrap | 换行，第一行在最上方 |
| wrap-reverse | 换行，第一行在最下方 |
<html>
<body>
<h4>nowrap</h4>
<div class="box flex nowrap" style="width:450px">
<div class="box-child orange">1</div>
<div class="box-child orange">2</div>
<div class="box-child orange">3</div>
<div class="box-child orange">4</div>
<div class="box-child orange">5</div>
<div class="box-child orange">6</div>
</div>
</body>
<style>
.nowrap{
flex-wrap: nowrap;
}
</style>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html>
<body>
<h4>wrap</h4>
<div class="box flex wrap" style="width:450px">
<div class="box-child orange">1</div>
<div class="box-child orange">2</div>
<div class="box-child orange">3</div>
<div class="box-child orange">4</div>
<div class="box-child orange">5</div>
<div class="box-child orange">6</div>
</div>
</body>
<style>
.wrap{
flex-wrap: wrap;
}
</style>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html>
<body>
<h4>wrap-reverse</h4>
<div class="box flex wrap-reverse" style="width:450px">
<div class="box-child orange">1</div>
<div class="box-child orange">2</div>
<div class="box-child orange">3</div>
<div class="box-child orange">4</div>
<div class="box-child orange">5</div>
<div class="box-child orange">6</div>
</div>
</body>
<style>
.wrap-reverse{
flex-wrap: wrap-reverse;
}
</style>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# flex-flow
flex-flow 是 flex-direction 与 flex-wrap 的组合简写形式，默认值是 row nowrap 。
.box{
flex-flow: <flex-direction> || <flex-wrap>;
}
1
2
3
2
3
# justify-content
定义子元素在主轴上的对齐方式
| 属性值 | 描述 |
|---|---|
| flex-start | 起点对齐 (默认)(例如主轴从左到右排列即为左对齐) |
| flex-end | 终点对齐 (例如主轴从左到右排列即为右对齐) |
| center | 居中对齐 |
| space-between | 两端对齐，子元素间间隔相等 |
| space-around | 子元素在盒内平分，每个子元素两侧间隔相等 |
<html>
<body>
<h4>flex-start</h4>
<div class="box flex justify-content flex-start">
<div class="box-child red" style="width: 50px">1</div>
<div class="box-child green" style="width: 100px">2</div>
<div class="box-child orange" style="width: 150px">3</div>
</div>
</body>
<style>
.justify-content.flex-start{
justify-content: flex-start;
}
</style>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
<body>
<h4>flex-end</h4>
<div class="box flex justify-content flex-end">
<div class="box-child red" style="width: 50px">1</div>
<div class="box-child green" style="width: 100px">2</div>
<div class="box-child orange" style="width: 150px">3</div>
</div>
</body>
<style>
.justify-content.flex-end{
justify-content: flex-end;
}
</style>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
<body>
<h4>center</h4>
<div class="box flex justify-content center">
<div class="box-child red" style="width: 50px">1</div>
<div class="box-child green" style="width: 100px">2</div>
<div class="box-child orange" style="width: 150px">3</div>
</div>
</body>
<style>
.justify-content.center{
justify-content: center;
}
</style>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
<body>
<h4>space-between</h4>
<div class="box flex justify-content space-between">
<div class="box-child red" style="width: 50px">1</div>
<div class="box-child green" style="width: 100px">2</div>
<div class="box-child orange" style="width: 150px">3</div>
</div>
</body>
<style>
.justify-content.space-between{
justify-content: space-between;
}
</style>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
<body>
<h4>space-around</h4>
<div class="box flex justify-content space-around">
<div class="box-child red" style="width: 50px">1</div>
<div class="box-child green" style="width: 100px">2</div>
<div class="box-child orange" style="width: 150px">3</div>
</div>
</body>
<style>
.justify-content.space-around{
justify-content: space-around;
}
</style>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# align-items
设置弹性元素在侧轴上的对齐方式
| 属性值 | 描述 |
|---|---|
| flex-start | 起点对齐 |
| flex-end | 终点对齐 |
| center | 居中对齐 |
| baseline | 第一行文字的基线对齐 |
| stretch | (默认值) 拉伸，如果未设置高度或设为 auto 将占满整个盒子 |
<html>
<body>
<h4>flex-start </h4>
<div class="box flex align-items flex-start ">
<div class="box-child red" style="height: 30px;line-height: 30px;">1</div>
<div class="box-child green" style="height: 50px;line-height: 50px;">2</div>
<div class="box-child orange" style="height: 100px;line-height: 100px;">3</div>
</div>
</body>
<style>
.align-items {
height: 150px;
}
.align-items.flex-start {
align-items: flex-start;
}
</style>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html>
<body>
<h4>flex-end </h4>
<div class="box flex align-items flex-end ">
<div class="box-child red" style="height: 30px;line-height: 30px;">1</div>
<div class="box-child green" style="height: 50px;line-height: 50px;">2</div>
<div class="box-child orange" style="height: 100px;line-height: 100px;">3</div>
</div>
</body>
<style>
.align-items.flex-end {
align-items: flex-end;
}
</style>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
<body>
<h4>center </h4>
<div class="box flex align-items center ">
<div class="box-child red" style="height: 30px;line-height: 30px;">1</div>
<div class="box-child green" style="height: 50px;line-height: 50px;">2</div>
<div class="box-child orange" style="height: 100px;line-height: 100px;">3</div>
</div>
</body>
<style>
.align-items.center {
align-items: center;
}
</style>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
<body>
<h4>baseline </h4>
<div class="box flex align-items baseline ">
<div class="box-child red" style="height: 30px;line-height: 30px;">1</div>
<div class="box-child green" style="height: 50px;line-height: 50px;">2</div>
<div class="box-child orange" style="height: 100px;line-height: 100px;">3</div>
</div>
</body>
<style>
.align-items.baseline {
align-items: baseline;
}
</style>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
<body>
<h4>stretch </h4>
<div class="box flex align-items stretch ">
<div class="box-child red" style="height: auto;">1</div>
<div class="box-child green" style="height: auto;">2</div>
<div class="box-child orange" style="height: auto;">3</div>
</div>
</body>
<style>
.align-items.stretch {
align-items: stretch;
}
</style>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# align-content
设置元素换行后多根轴线的对齐方式，如果只有一根轴线则不起作用
| 属性值 | 描述 |
|---|---|
| flex-start | 起点对齐 |
| flex-end | 终点对齐 |
| center | 居中对齐 |
| space-between | 两端对齐 |
| space-around | 子元素侧轴方向上两边间隔相等 |
| stretch | 拉伸 |
<html>
<body>
<h4>flex-start</h4>
<div class="box flex wrap align-content flex-start">
<div class="box-child orange">1</div>
<div class="box-child orange">2</div>
<div class="box-child orange">3</div>
<div class="box-child orange">4</div>
<div class="box-child orange">5</div>
<div class="box-child orange">6</div>
</div>
</body>
<style>
.box.align-content {
height: 200px;
width: 450px;
align-items: flex-start;
}
.align-content.flex-start {
align-content: flex-start;
}
</style>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<html>
<body>
<h4>flex-end</h4>
<div class="box flex wrap align-content flex-end">
<div class="box-child orange">1</div>
<div class="box-child orange">2</div>
<div class="box-child orange">3</div>
<div class="box-child orange">4</div>
<div class="box-child orange">5</div>
<div class="box-child orange">6</div>
</div>
</body>
<style>
.align-content.flex-end {
align-content: flex-end;
}
</style>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html>
<body>
<h4>center</h4>
<div class="box flex wrap align-content center">
<div class="box-child orange">1</div>
<div class="box-child orange">2</div>
<div class="box-child orange">3</div>
<div class="box-child orange">4</div>
<div class="box-child orange">5</div>
<div class="box-child orange">6</div>
</div>
</body>
<style>
.align-content.center {
align-content: center;
}
</style>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html>
<body>
<h4>space-between</h4>
<div class="box flex wrap align-content space-between">
<div class="box-child orange">1</div>
<div class="box-child orange">2</div>
<div class="box-child orange">3</div>
<div class="box-child orange">4</div>
<div class="box-child orange">5</div>
<div class="box-child orange">6</div>
</div>
</body>
<style>
.align-content.space-between {
align-content: space-between;
}
</style>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html>
<body>
<h4>space-around</h4>
<div class="box flex wrap align-content space-around">
<div class="box-child orange">1</div>
<div class="box-child orange">2</div>
<div class="box-child orange">3</div>
<div class="box-child orange">4</div>
<div class="box-child orange">5</div>
<div class="box-child orange">6</div>
</div>
</body>
<style>
.align-content.space-around {
align-content: space-around;
}
</style>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html>
<body>
<h4>stretch</h4>
<div class="box flex wrap align-content stretch">
<div class="box-child orange">1</div>
<div class="box-child orange">2</div>
<div class="box-child orange">3</div>
<div class="box-child orange">4</div>
<div class="box-child orange">5</div>
<div class="box-child orange">6</div>
</div>
</body>
<style>
.align-content.stretch {
align-content: stretch;
}
</style>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# 弹性元素
弹性盒子内的元素称为弹性元素，弹性元素有下面常用的属性
# order
定义项目的排列顺序，数字越小排列越靠前，默认值为 0
.box-child{
order: <interger>;
}
1
2
3
2
3
# flex-grow
定义项目的放大比例，默认为 0。如果所有项目的 flex-grow 为 1 则他们将等分剩余的空间。如果某个项目的该属性为 2 其余项目为 1，则这个项目占据空间是其他项目的两倍。
.box-child{
flex-grow: <number>;
}
1
2
3
2
3
<html>
<body>
<div class="box flex">
<div class="box-child orange" style="width:auto; flex-grow:1;">1</div>
<div class="box-child orange" style="width:auto; flex-grow:2;">2</div>
<div class="box-child orange" style="width:auto; flex-grow:1;">3</div>
</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# flex-shrink
该属性定义了项目的缩小比例，默认为 1。当空间不足时，所有该属性不为 0 的项目都将等比例缩小，如果属性为 0 则不缩小。
.box-child{
flex-shrink: <number>;
}
1
2
3
2
3
<html>
<body>
<h4>变更窗口大小查看效果</h4>
<div class="box flex">
<div class="box-child orange" style="flex-shrink:1;">1</div>
<div class="box-child orange" style="flex-shrink:2;">2</div>
<div class="box-child orange" style="flex-shrink:0;">3</div>
<div class="box-child orange" style="flex-shrink:1;">4</div>
<div class="box-child orange" style="flex-shrink:1;">5</div>
<div class="box-child orange" style="flex-shrink:1;">6</div>
</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# flex-basis
定义在分配多余空间之前项目占据的主轴空间。浏览器根据这个属性计算主轴是否有多余空间。默认值为 auto 即项目的原本大小。
.box-child{
flex-basis: <length> | auto;
}
1
2
3
2
3
该属性可以设为跟 width 或 height 属性一样的值，则项目占据固定空间
# flex
该属性是 flex-grow , flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto 。后两个属性可选。
该属性有两个快捷值 auto ( 1 1 auto ) 和 none ( 0 0 auto )，建议优先使用这个属性而不是单独写三个分离属性。
# align-self
该属性允许单个项目有与其他项目不一样的对齐方式，可以覆盖 align-items ，默认值为 auto ，表示继承父元素的 align-items 属性，该属性可以取六个值，除了 auto 外其余均与 align-items 相同。
.box-child{
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
1
2
3
2
3
<html>
<body>
<h4>将第三个元素设置为 flex-end</h4>
<div class="box flex align-items flex-start ">
<div class="box-child orange">1</div>
<div class="box-child orange">2</div>
<div class="box-child orange" style="align-self:flex-end;">3</div>
<div class="box-child orange">4</div>
<div class="box-child orange">5</div>
</div>
</body>
<style>
.align-items {
height: 150px;
}
.align-items.flex-start {
align-items: flex-start;
}
</style>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23