CSS Flex 容器
父元素（容器）
正如我们在上一章中所述，这是一个弹性 **容器**（蓝色区域），包含三个弹性 **项目**
1
2
3
通过将 display 属性设置为 flex，弹性容器变得灵活
弹性容器属性是
flex-direction 属性
flex-direction 属性定义容器想要堆叠弹性项目的哪个方向。
1
2
3
示例
column-reverse 值垂直堆叠弹性项目（但从下到上）
.flex-container {
display: flex;
flex-direction: column-reverse;
}
示例
row-reverse 值水平堆叠弹性项目（但从右到左）
.flex-container {
display: flex;
flex-direction: row-reverse;
}
flex-wrap 属性
flex-wrap 属性指定弹性项目是否应该换行。
以下示例包含 12 个弹性项目，以便更好地演示 flex-wrap 属性。
1
2
3
4
5
6
7
8
9
10
11
12
示例
wrap-reverse 值指定如果必要，弹性项目将换行，但顺序相反
.flex-container {
display: flex;
flex-wrap: wrap-reverse;
}
flex-flow 属性
属性 flex-flow 是一个简写属性，用于设置 flex-direction 和 flex-wrap 属性。
justify-content 属性
属性 justify-content 用于对齐弹性项目。
1
2
3
示例
值 flex-start 将弹性项目对齐到容器的开头（默认）。
.flex-container {
display: flex;
justify-content: flex-start;
}
示例
值 space-around 将弹性项目显示在行之前、之间和之后的空间中。
.flex-container {
display: flex;
justify-content: space-around;
}
示例
值 space-between 将弹性项目显示在行之间的空间中。
.flex-container {
display: flex;
justify-content: space-between;
}
align-items 属性
属性 align-items 用于对齐弹性项目。
1
2
3
在这些示例中，我们使用一个 200 像素高的容器，以更好地展示 align-items 属性。
示例
值 center 将弹性项目对齐到容器的中间。
.flex-container {
display: flex;
height: 200px;
align-items: center;
}
示例
值 flex-start 将弹性项目对齐到容器的顶部。
.flex-container {
display: flex;
height: 200px;
align-items: flex-start;
}
示例
值 flex-end 将弹性项目对齐到容器的底部。
.flex-container {
display: flex;
height: 200px;
align-items: flex-end;
}
示例
值 stretch 将弹性项目拉伸以填充容器（默认）。
.flex-container {
display: flex;
height: 200px;
align-items: stretch;
}
示例
值 baseline 将弹性项目对齐，如它们的基线对齐。
.flex-container {
display: flex;
height: 200px;
align-items: baseline;
}
注意：示例使用不同的字体大小来演示项目如何通过文本基线对齐。
1
2
3
align-content 属性
属性 align-content 用于对齐弹性行。
1
2
3
4
5
6
7
8
9
10
11
12
在这些示例中，我们使用一个 600 像素高的容器，并设置 flex-wrap 属性为 wrap，以更好地展示 align-content 属性。
示例
值 space-between 在弹性行之间显示相等的空间。
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-between;
}
示例
值 space-around 在弹性行之前、之间和之后显示空间。
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-around;
}
示例
值 stretch 将弹性行拉伸以占用剩余的空间（默认）。
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: stretch;
}
示例
值 center 将弹性行显示在容器的中间。
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: center;
}
示例
值 flex-start 将弹性行显示在容器的开头。
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-start;
}
示例
值 flex-end 将弹性行显示在容器的结尾：
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-end;
}
完美居中
在以下示例中，我们将解决一个非常常见的样式问题：完美居中。
解决方案：将 justify-content 和 align-items 属性都设置为 center，弹性项目将完美居中。
示例
.flex-container {
display: flex;
height: 300px;
justify-content: center;
align-items: center;
}
CSS 弹性盒容器属性
下表列出了所有 CSS 弹性盒容器属性。
| 属性 | 描述 |
|---|---|
| align-content | 修改 flex-wrap 属性的行为。它类似于 align-items，但它不是对齐弹性项目，而是对齐弹性行。 |
| align-items | 当项目在交叉轴上没有使用所有可用空间时，垂直对齐弹性项目。 |
| 显示 | 指定用于 HTML 元素的框类型。 |
| flex-direction | 指定弹性容器中弹性项目的排列方向。 |
| flex-flow | flex-direction 和 flex-wrap 的简写属性。 |
| flex-wrap | 指定弹性项目是否应该换行，如果一行没有足够的空间容纳它们。 |
| justify-content | 当项目在主轴上没有使用所有可用空间时，水平对齐弹性项目。 |
