CSS - justify-content

描述

justify-content 屬性用於控制彈性容器主軸上彈性專案的對齊方式。

它確定如何在彈性專案之間和周圍分配額外的空間。

可能的值

flex-start
flex-end
center
space-between
space-around
space-evenly

應用於

所有 HTML 元素。

DOM 語法

justify-content: flex-start|flex-end|center|space-between|space-around|space-evenly;

內容對齊開始

flex-start 值沿主軸對齊彈性專案，將它們放置在容器的開頭，專案之間或周圍沒有任何額外的空間 - 如下例所示

<html>
<head>
<style>
   .my-flex-container {
      display: flex;
      justify-content: flex-start;
      background-color: #0ca14a;
   }
   .my-flex-container div {
      background-color: #FBFF22;
      padding: 10px;
      margin: 5px;
      width: 75px;
      height: 50px;
   }
</style>
</head>
<body>
   <div class="my-flex-container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div>Flex item 3</div>
      <div>Flex item 4</div>
   </div>
</body>
</html>

內容對齊結束

當您將 justify-content 設定為 flex-end 時，彈性專案將對齊到彈性容器的末尾 - 如下例所示

<html>
<head>
<style>
   .my-flex-container {
      display: flex;
      justify-content: flex-end;
      background-color: #0ca14a;
   }
   .my-flex-container div {
      background-color: #FBFF22;
      padding: 10px;
      margin: 5px;
      width: 75px;
      height: 50px;
   }
</style>
</head>
<body>
   <div class="my-flex-container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div>Flex item 3</div>
      <div>Flex item 4</div>
   </div>
</body>
</html>

內容對齊居中

justify-content: center 屬性，它沿主軸對齊彈性專案，在容器內水平居中 - 如下例所示

<html>
<head>
<style>
   .my-flex-container {
      display: flex;
      justify-content: center;
      background-color: #0ca14a;
   }
   .my-flex-container div {
      background-color: #FBFF22;
      padding: 10px;
      margin: 5px;
      width: 75px;
      height: 50px;
   }
</style>
</head>
<body>
   <div class="my-flex-container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div>Flex item 3</div>
      <div>Flex item 4</div>
   </div>
</body>
</html>

內容對齊間隔

justify-content: space-between 屬性沿主軸均勻分佈彈性專案，在相鄰專案之間留出相等的空間，但在容器的邊緣沒有空間 - 如下例所示

<html>
<head>
<style>
   .my-flex-container {
      display: flex;
      justify-content: space-between;
      background-color: #0ca14a;
   }
   .my-flex-container div {
      background-color: #FBFF22;
      padding: 10px;
      margin: 5px;
      width: 75px;
      height: 50px;
   }
</style>
</head>
<body>
   <div class="my-flex-container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div>Flex item 3</div>
      <div>Flex item 4</div>
   </div>
</body>
</html>

內容對齊環繞

我們可以將 justify-content 屬性設定為 space-around 值，該值沿主軸均勻分佈彈性專案周圍的空間，在相鄰專案之間以及容器的邊緣建立相等的間隙 - 如下例所示

<html>
<head>
<style>
   .my-flex-container {
      display: flex;
      justify-content: space-around;
      background-color: #0ca14a;
   }
   .my-flex-container div {
      background-color: #FBFF22;
      padding: 10px;
      margin: 5px;
      width: 75px;
      height: 50px;
   }
</style>
</head>
<body>
   <div class="my-flex-container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div>Flex item 3</div>
      <div>Flex item 4</div>
   </div>
</body>
</html>

內容對齊平均分佈

justify-content: space-evenly 屬性沿主軸均勻分佈彈性專案之間的空間，包括外部邊緣和專案之間的空間，從而導致所有專案之間的間距相等 - 如下例所示

<html>
<head>
<style>
   .my-flex-container {
      display: flex;
      justify-content: space-evenly;
      background-color: #0ca14a;
   }
   .my-flex-container div {
      background-color: #FBFF22;
      padding: 10px;
      margin: 5px;
      width: 75px;
      height: 50px;
   }
</style>
</head>
<body>
   <div class="my-flex-container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div>Flex item 3</div>
      <div>Flex item 4</div>
   </div>
</body>
</html>

列印頁面