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.