CSS align-content - 易学教程，面试笔记经验！

CSS 属性

CSS 的align-content 属性用于沿横轴或网格的块轴对齐Flex 容器的内容。它适用于具有多行 Flex 项目的 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:
- first baseline，last baseline与baseline同义。 First 和 Last 指的是 Flex 项目中的行框。
- 这些值指定内容对齐中的第一个或最后一个基线对齐。
- start 是第一个基线的后备对齐方式，end 是最后一个基线的后备对齐方式。
space-between:沿横轴均匀分布内容，第一行之前或最后一行之后不留空格。
space-around:分布内容内容沿横轴均匀分布，在每行前后提供相等的空间。
space-evenly:沿横轴均匀分布内容，在每行之前提供相等的空间，每行之间和之后。
stretch:拉伸内容以沿横轴填充容器。
safe:与对齐关键字一起使用，当项目溢出容器导致任何数据丢失时，对齐方式将根据起始值设置。
unsafe:与对齐关键字一起使用alignment 关键字，即使项目溢出容器，导致任何数据丢失，传递的对齐值也会被遵守。

适用

Multi- line flex 容器。

语法

位置对齐

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: flex-start

以下示例演示了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: space-between

以下示例演示了align-content:space-between属性沿横轴均匀分布弹性项目之间的空间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: space-around

以下示例演示了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: baseline

以下示例演示了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: stretch

以下示例演示了align-content:stretch 属性沿横轴拉伸 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>