CSS - align-content 属性_CSS 菜鸟教程

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>

<< CSS - PX 到 EM 的转换 CSS - align-items 属性 >>