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