CSS - justify-content 屬性

CSS 的justify-content屬性用於確定彈性容器的主軸或網格容器的內聯軸上內容項的對齊方式和空間分配。對於彈性容器，主軸的方向由flex-direction確定，垂直於主軸的方向是交叉軸。

語法

位置對齊

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

屬性值

值	描述
flex-start	專案位於容器的起始位置。預設值。
flex-end	專案位於容器的結束位置。
center	專案位於容器的中心位置。
space-between	容器中的專案之間有間隔。
space-around	容器中的專案在其之前、之間和之後都有間隔。
space-evenly	容器中的專案在其周圍有相等的空間。
initial	將屬性設定為其預設值。
inherit	從父元素繼承屬性。

CSS Justify Content 屬性示例

以下示例說明了使用不同值的justify-content屬性。

使用 Flex Start 值的 Justify Content 屬性

為了將專案沿主軸放置在彈性容器的起始位置，我們使用flex-start值。以下示例展示了這一點。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: flex;
         justify-content: flex-start;
         gap: 10px;
         border: 2px solid black;
         height: 200px;
         padding: 5px;
      }

      .container>div {
         background-color: lightblue;
         text-align: center;
         bordeR: 2px solid blue;
         color: white;
         padding: 15px;
         height: 20px;
         width: 60px;
      }
   </style>
</head>

<body>
   <h2>
      CSS justify-content property
   </h2>
   <h4>
      justify-content: flex-start; display:flex
   </h4>
   <div class="container">
      <div>
         Item-1
      </div>
      <div>
         Item-2
      </div>
      <div>
         Item-3
      </div>
   </div>
</body>

</html>

使用 Flex End 值的 Justify Content 屬性

為了將專案沿主軸放置在彈性容器的結束位置，我們使用flex-end值。以下示例展示了這一點。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: flex;
         justify-content: flex-end;
         gap: 10px;
         border: 2px solid black;
         height: 200px;
         padding: 5px;
      }

      .container>div {
         background-color: lightblue;
         text-align: center;
         bordeR: 2px solid blue;
         color: white;
         padding: 15px;
         height: 20px;
         width: 60px;
      }
   </style>
</head>

<body>
   <h2>
      CSS justify-content property
   </h2>
   <h4>
      justify-content: flex-end; display:flex
   </h4>
   <div class="container">
      <div>
         Item-1
      </div>
      <div>
         Item-2
      </div>
      <div>
         Item-3
      </div>
   </div>
</body>

</html>

使用 Center 值的 Justify Content 屬性

為了將專案沿主軸放置在彈性容器的中心位置，我們使用center值。以下示例展示了這一點。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: flex;
         justify-content: center;
         gap: 10px;
         border: 2px solid black;
         height: 200px;
         padding: 5px;
      }

      .container>div {
         background-color: lightblue;
         text-align: center;
         bordeR: 2px solid blue;
         color: white;
         padding: 15px;
         height: 20px;
         width: 60px;
      }
   </style>
</head>

<body>
   <h2>
      CSS justify-content property
   </h2>
   <h4>
      justify-content: center; display:flex
   </h4>
   <div class="container">
      <div>
         Item-1
      </div>
      <div>
         Item-2
      </div>
      <div>
         Item-3
      </div>
   </div>
</body>

</html>

使用 Space Between 值的 Justify Content 屬性

為了將彈性容器中的專案沿主軸放置，使它們之間有間隔，我們使用space-between值。以下示例展示了這一點。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: flex;
         justify-content: space-between;
         gap: 10px;
         border: 2px solid black;
         height: 200px;
         padding: 5px;
      }

      .container>div {
         background-color: lightblue;
         text-align: center;
         bordeR: 2px solid blue;
         color: white;
         padding: 15px;
         height: 20px;
         width: 60px;
      }
   </style>
</head>

<body>
   <h2>
      CSS justify-content property
   </h2>
   <h4>
      justify-content: space-between; display:flex
   </h4>
   <div class="container">
      <div>
         Item-1
      </div>
      <div>
         Item-2
      </div>
      <div>
         Item-3
      </div>
   </div>
</body>

</html>

使用 Space Around 值的 Justify Content 屬性

為了將彈性容器中的專案沿主軸放置，使它們在其之前、之後和之間都有間隔，我們使用space-around值。以下示例展示了這一點。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: flex;
         justify-content: space-around;
         gap: 10px;
         border: 2px solid black;
         height: 200px;
         padding: 5px;
      }

      .container>div {
         background-color: lightblue;
         text-align: center;
         bordeR: 2px solid blue;
         color: white;
         padding: 15px;
         height: 20px;
         width: 60px;
      }
   </style>
</head>

<body>
   <h2>
      CSS justify-content property
   </h2>
   <h4>
      justify-content: space-around; display:flex
   </h4>
   <div class="container">
      <div>
         Item-1
      </div>
      <div>
         Item-2
      </div>
      <div>
         Item-3
      </div>
   </div>
</body>

</html>

使用 Space Evenly 值的 Justify Content 屬性

為了將彈性容器中的專案沿主軸放置，使它們在其周圍有相等的空間分佈，我們使用space-evenly值。以下示例展示了這一點。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: flex;
         justify-content: space-evenly;
         gap: 10px;
         border: 2px solid black;
         height: 200px;
         padding: 5px;
      }

      .container>div {
         background-color: lightblue;
         text-align: center;
         bordeR: 2px solid blue;
         color: white;
         padding: 15px;
         height: 20px;
         width: 60px;
      }
   </style>
</head>

<body>
   <h2>
      CSS justify-content property
   </h2>
   <h4>
      justify-content: space-evenly; display:flex
   </h4>
   <div class="container">
      <div>
         Item-1
      </div>
      <div>
         Item-2
      </div>
      <div>
         Item-3
      </div>
   </div>
</body>

</html>

使用網格佈局的 Justify Content 屬性

justify-content屬性也可以與網格佈局一起使用，以沿內聯方向對齊專案。以下示例展示了這一點。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: grid;
         justify-content: center;
         gap: 10px;
         border: 2px solid black;
         height: 300px;
         padding: 5px;
      }

      .container>div {
         background-color: lightblue;
         text-align: center;
         bordeR: 2px solid blue;
         color: white;
         padding: 15px;
         height: 30px;
         width: 80px;
      }
   </style>
</head>

<body>
   <h2>
      CSS justify-content property
   </h2>
   <h4>
      justify-content: center; display:grid
   </h4>
   <div class="container">
      <div>
         Item-1
      </div>
      <div>
         Item-2
      </div>
      <div>
         Item-3
      </div>
   </div>
</body>

</html>

支援的瀏覽器

屬性
justify-content	29.0	11.0	28.0	9.0	17.0

css_properties_reference.htm

列印頁面