CSS 的 align-content 属性用于沿十字轴或网格的块轴对齐 flex 容器的内容。它适用于具有多行柔性物品的柔性容器。
属性 align-content 对单行 flex 容器 （flex-wrap： nowrap） 没有影响。
可能的值
align-content 属性可以具有以下值：
start：物料在十字轴上与容器的起始边缘对齐。
end：物料在十字轴上与容器的末端边缘相互对齐。
flex-start：将内容对齐 flex 容器的开头。
flex-end：对齐 flex 容器末端的内容。
center：将内容对齐在 flex 容器的中心。
normal：项目在其默认位置对齐，就像没有为 align-content 设置任何值一样。
baseline, first baseline, last baseline：
- 第一个基线和最后一个基线是基线的同义词。第一个和最后一个是指 flex 项中的行框。
- 这些值指定了第一基线对齐或最后基线对齐在内容对齐中的参与。
- “start”是第一个基线的回退对齐，结束是最后一个基线的回退对齐。
space-between：沿十字轴均匀分布内容，在第一行之前或最后一行之后不留任何空间。
space-around：沿十字轴均匀分布内容，在每行前后提供相等的空间。
space-evenly：沿横轴均匀分布内容，在每行之前、之间和之后提供相等的空间。
stretch：拉伸内容物以沿十字轴填充容器。
safe：与对齐关键字一起使用，当项目溢出容器时，导致任何数据丢失，将对齐方式将根据起始值进行设置。
unsafe：与对齐关键字一起使用，即使项目溢出容器，导致任何数据丢失，也会遵守传递的对齐值。
适用于
多线柔性集装箱。
语法
位置对准
align-content: center;
align-content: start;
align-content: end;
align-content: flex-start;
align-content: flex-end
正常对齐
align-content: normal;
基线对齐
align-content: baseline;
align-content: first baseline;
align-content: last baseline;
分布式对齐
align-content: space-between;
align-content: space-around;
align-content: space-evenly;
align-content: stretch;
CSS align-content- start 值
以下示例演示了 align-content： start 属性将 flex 项对齐在 flex 容器的交叉轴起点处 -
<html>
<head>
<style>
.flex-container {
display: flex;
background-color: green;
height: 350px;
width: 100%;
flex-wrap: wrap;
align-content: start;
}
.flex-container div {
background-color: yellow;
padding: 10px;
margin: 5px;
width: 90px;
height: 50px;
}
</style>
</head>
<body>
<div class="flex-container">
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
<div>Flex item 4</div>
<div>Flex item 5</div>
<div>Flex item 6</div>
<div>Flex item 7</div>
</div>
</body>
</html>
CSS align-content- end 值
以下示例演示了 align-content： end 属性将 flex 项对齐在 flex 容器的交叉轴末端 -
<html>
<head>
<style>
.flex-container {
display: flex;
background-color: green;
height: 350px;
width: 100%;
flex-wrap: wrap;
align-content: end;
}
.flex-container div {
background-color: yellow;
padding: 10px;
margin: 5px;
width: 90px;
height: 50px;
}
</style>
</head>
<body>
<div class="flex-container">
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
<div>Flex item 4</div>
<div>Flex item 5</div>
<div>Flex item 6</div>
<div>Flex item 7</div>
</div>
</body>
</html>
CSS align-content - center 值
以下示例演示了 align-content： center 属性将 flex 项对齐在 flex 容器的交叉轴中心——
<html>
<head>
<style>
.flex-container {
display: flex;
background-color: green;
height: 350px;
width: 100%;
flex-wrap: wrap;
align-content: center;
}
.flex-container div {
background-color: yellow;
padding: 10px;
margin: 5px;
width: 90px;
height: 50px;
}
</style>
</head>
<body>
<div class="flex-container">
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
<div>Flex item 4</div>
<div>Flex item 5</div>
<div>Flex item 6</div>
<div>Flex item 7</div>
</div>
</body>
</html>
CSS align-content - 弹性启动值
以下示例演示了 align-content： flex-start 属性将 flex 项对齐 flex 容器的开头 -
<html>
<head>
<style>
.flex-container {
display: flex;
background-color: green;
height: 350px;
width: 100%;
flex-wrap: wrap;
align-content: flex-start;
}
.flex-container div {
background-color: yellow;
padding: 10px;
margin: 5px;
width: 90px;
height: 50px;
}
</style>
</head>
<body>
<div class="flex-container">
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
<div>Flex item 4</div>
<div>Flex item 5</div>
<div>Flex item 6</div>
<div>Flex item 7</div>
</div>
</body>
</html>
CSS align-content - flex-end 值
以下示例演示了 align-content： flex-end 属性将 flex 项对齐 flex 容器的末尾 -
<html>
<head>
<style>
.flex-container {
display: flex;
background-color: green;
height: 350px;
width: 100%;
flex-wrap: wrap;
align-content: flex-end;
}
.flex-container div {
background-color: yellow;
padding: 10px;
margin: 5px;
width: 90px;
height: 50px;
}
</style>
</head>
<body>
<div class="flex-container">
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
<div>Flex item 4</div>
<div>Flex item 5</div>
<div>Flex item 6</div>
<div>Flex item 7</div>
</div>
</body>
</html>
CSS align-content - 值之间的空格
以下示例演示了 align-content： space-between 属性沿 flex 容器的交叉轴在 flex 项之间均匀分布空间 -
<html>
<head>
<style>
.flex-container {
display: flex;
background-color: green;
height: 350px;
width: 100%;
flex-wrap: wrap;
align-content: space-between;
}
.flex-container div {
background-color: yellow;
padding: 10px;
margin: 5px;
width: 90px;
height: 50px;
}
</style>
</head>
<body>
<div class="flex-container">
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
<div>Flex item 4</div>
<div>Flex item 5</div>
<div>Flex item 6</div>
<div>Flex item 7</div>
</div>
</body>
</html>
CSS align-content - 空格包围值
以下示例演示了 align-content： space-around 属性将 flex 项分布在 flex 容器中，每个项周围具有相等的空间 −
<html>
<head>
<style>
.flex-container {
display: flex;
background-color: green;
height: 350px;
width: 100%;
flex-wrap: wrap;
align-content: space-around;
}
.flex-container div {
background-color: yellow;
padding: 10px;
margin: 5px;
width: 90px;
height: 50px;
}
</style>
</head>
<body>
<div class="flex-container">
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
<div>Flex item 4</div>
<div>Flex item 5</div>
<div>Flex item 6</div>
<div>Flex item 7</div>
</div>
</body>
</html>
CSS align-content - space-evenly 值
以下示例演示了 align-content： space-evenly 均匀地沿 flex 容器的横轴在 flex 项周围和之间均匀分布空间 -
<html>
<head>
<style>
.flex-container {
display: flex;
background-color: green;
height: 300px;
width: 100%;
flex-wrap: wrap;
align-content: space-evenly;
}
.flex-container div {
background-color: yellow;
padding: 10px;
margin: 5px;
width: 90px;
height: 50px;
}
</style>
</head>
<body>
<div class="flex-container">
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
<div>Flex item 4</div>
<div>Flex item 5</div>
<div>Flex item 6</div>
</div>
</body>
</html>
CSS align-content - 基线值
以下示例演示了 align-content： baseline 属性沿 flex 容器的基线对齐 flex 项 -
<html>
<head>
<style>
.flex-container {
display: flex;
background-color: green;
height: 350px;
width: 100%;
flex-wrap: wrap;
align-content: baseline;
}
.flex-container div {
background-color: yellow;
padding: 10px;
margin: 5px;
width: 90px;
height: 50px;
}
</style>
</head>
<body>
<div class="flex-container">
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
<div>Flex item 4</div>
<div>Flex item 5</div>
<div>Flex item 6</div>
<div>Flex item 7</div>
</div>
</body>
</html>
CSS align-content - 拉伸值
以下示例演示了 align-content： stretch 属性沿 flex 容器的十字轴拉伸 flex 项以填充可用空间 -
<html>
<head>
<style>
.flex-container {
display: flex;
background-color: green;
height: 200px;
width: 100%;
flex-wrap: wrap;
align-content: stretch;
}
.flex-container div {
background-color: yellow;
padding: 10px;
margin: 5px;
width: 90px;
}
</style>
</head>
<body>
<div class="flex-container">
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
</div>
</body>
</html>
