CSS Flexbox - align-content

上一页
下一页

CSS align-content 属性用于控制在 Flexbox 的交叉轴或 Grid 的块轴上内容项之间的分布。

可能的值

  • start − 弹性项目紧密排列在交叉轴上对齐容器的起始边缘。

  • end − 弹性项目紧密排列在交叉轴上对齐容器的结束边缘。

  • center − 弹性项目紧密排列在交叉轴上对齐容器的中心。

  • flex-start − 弹性项目紧密排列在由弹性容器的cross-start侧确定的对齐容器边缘。这仅适用于弹性布局项目，对于不是弹性容器子项的项目，其行为类似于start。

  • flex-end − 弹性项目紧密排列在由弹性容器的cross-end侧确定的对齐容器边缘。这仅适用于弹性布局项目，对于不是弹性容器子项的项目，其行为类似于end。

  • normal − 当未设置align-content值时，保持项目的默认位置。

  • space-between − 它在弹性容器的交叉轴上均匀地分布弹性项目之间的空间。每对相邻元素具有相同的间距。第一个和最后一个项目与交叉轴上对齐容器的起始边缘和结束边缘齐平。

  • space-around − 它在弹性容器的交叉轴上均匀地分布弹性项目周围的空间。每对相邻元素具有相同的间距。第一个项目之前的间距和最后一个项目之后的间距等于每对相邻项目之间间距的一半。

  • space-evenly − 它均匀地分布交叉轴上弹性项目周围和之间的空间。相邻项目具有相同的间距，起始边缘和第一个项目，以及结束边缘和最后一个项目。

  • baseline − 沿弹性容器的基线对齐弹性项目。

  • stretch − 如果项目沿交叉轴的总大小小于对齐容器，则自动大小的项目会平均增加其大小以填充容器，同时遵守max-height/max-width约束。

应用于

多行弹性容器。

语法

位置对齐

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属性如何将弹性项目对齐在弹性容器交叉轴的起始位置：

<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属性如何将弹性项目对齐在弹性容器交叉轴的结束位置：

<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属性如何将弹性项目对齐在弹性容器交叉轴的中心位置：

<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属性如何将弹性项目对齐在弹性容器的起始位置：

<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属性如何将弹性项目对齐在弹性容器的结束位置：

<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属性如何在弹性容器的交叉轴上均匀分布弹性项目之间的空间：

<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属性如何在弹性容器内以每个项目周围的相等空间分布弹性项目：

<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属性如何在弹性容器的交叉轴上均匀地分布弹性项目周围和之间的空间：

<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属性如何沿弹性容器的基线对齐弹性项目：

<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属性如何沿弹性容器的交叉轴拉伸弹性项目以填充可用空间：

<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>
打印页面
上一页
下一页
广告
© . All rights reserved.