CSS3 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-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-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;
}
注释: 该例使用不同的 font-size 来演示项目已按文本基线对齐:
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 属性设置为居中，然后 flex 项目将完美居中:
实例
.flex-container {
display: flex;
height: 300px;
justify-content:
center;
align-items: center;
}
