align-content属性
时间: 2023-07-03 22:27:30 浏览: 44
`align-content` 是 CSS 属性之一,用于在容器内部的多行项目之间设置对齐方式。它可以被应用于任何带有 `display: flex` 或 `display: grid` 属性的容器中。
`align-content` 属性可以接受以下值:
- `stretch`(默认值):项目被拉伸以适应容器。
- `flex-start`:项目与交叉轴的起点对齐。
- `flex-end`:项目与交叉轴的终点对齐。
- `center`:项目在交叉轴上居中对齐。
- `space-between`:项目之间平均分配空间。
- `space-around`:项目周围平均分配空间,每个项目两侧的空间相等。
- `space-evenly`:项目之间平均分配空间,包括首尾两端的空间。
一些示例:
```
.container {
display: flex;
align-content: center; /* 内部多行项目居中对齐 */
}
.container {
display: flex;
align-content: flex-end; /* 内部多行项目沿着交叉轴的终点对齐 */
}
.container {
display: flex;
align-content: stretch; /* 内部多行项目被拉伸以适应容器 */
}
.container {
display: flex;
align-content: space-between; /* 内部多行项目之间平均分配空间 */
}
.container {
display: flex;
align-content: space-around; /* 内部多行项目周围平均分配空间 */
}
.container {
display: flex;
align-content: space-evenly; /* 内部多行项目之间平均分配空间,包括首尾两端的空间 */
}
```