# 容器的属性和常用值
容器可以通过设置display属性为flex / inline-flex（行内 flex）来指定其为 flex 布局。
下面，将记录一下容器的属性和常用值，基本可以囊括大多数应用场景。
| 属性 | 含义 | 值 | 常用值 |
|---|---|---|---|
| flex-direction | 项目排列方向 | row(默认)、row-reverse、column、column-reverse | row / column |
| flex-wrap | 项目是否换行 | nowrap(默认)、wrap、wrap-reverse | wrap（允许换行） |
| justify-content | 水平对齐方向 | flex-start(默认)、flex-end、center、space-between、space-around | center(水平居中)/ space-around(等间距布局) |
| align-items | 垂直对齐方向 | flex-start、flex-end、center、baseline、stretch(默认: 占满整个容器的高度) | center(垂直居中) |
# 项目的属性和常用值
首先来看下项目元素上常用的 2 个属性，order和flex-grow：
| 属性 | 含义 | 值 | 常用值 |
|---|---|---|---|
| order | 项目本身的排列顺序 | 整数，默认为 0。越小越靠前 | 整数 |
| flex-grow | 项目的放大比例 | ≥0 的整数，默认为 0 | 1 |
其中，order很好理解，下面通过一个例子来展示flex-grow属性的妙用：
<html>
<head>
<style>
div {
display: flex;
}
span:nth-child(1) {
flex-grow: 1;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</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
可以在浏览器中看到，第一个<span>标签由于设置了flex-grow: 1，它自动占据了父容器除了剩下两个<span>标签外的所有空间！