CSS - justify-items 屬性

CSS justify-items 屬性用於沿內聯方向（水平方向）對齊網格專案在其網格區域內的排列。它控制專案在其網格單元格內的放置方式，有效地設定它們在容器網格內的對齊方式。

語法

justify-items: legacy | normal | stretch | start | left | center | end | right |  overflow-alignment | baseline alignment | initial | inherit;

屬性值

值	描述
legacy	此值由子盒繼承。但是，如果子代具有 justify-self: auto，則只考慮 left、right 或 center 值，而不考慮 legacy 關鍵字。預設值。
normal	它取決於佈局模式，對於網格佈局，它與“stretch”相同。
stretch	如果未設定寬度，則它會拉伸以填充網格單元格。
start	它將專案沿內聯方向對齊到對齊容器的起始邊緣。
left	它將專案沿內聯方向對齊到對齊容器的左邊緣。
center	它將專案沿內聯方向對齊到對齊容器的中心邊緣。
end	它將專案沿內聯方向對齊到對齊容器的結束邊緣。
right	它將專案沿內聯方向對齊到對齊容器的右邊緣。
溢位對齊	safe：如果專案的尺寸超過對齊容器，則專案的對齊模式設定為“start”。 unsafe：無論專案和對齊容器的相對大小如何，都會遵守指定的對齊值。
基線對齊	元素與父元素的基線對齊。
initial	它將屬性設定為其預設值。
inherit	它從父元素繼承屬性。

CSS Justify Items 屬性示例

以下示例說明了具有不同值的justify-items 屬性。

使用 Normal 值的 Justify Items 屬性

要使用預設對齊行為（在大多數現代瀏覽器中通常對應於stretch）對齊專案，我們使用normal值。以下示例顯示了這一點。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         justify-items: normal;
         gap: 10px;
         border: 2px solid black;
         height: 150px;
         padding: 5px;
      }

      .container>div {
         background-color: lightgreen;
         text-align: center;
         bordeR: 2px solid green;
         color: white;
         padding: 15px;
         height: 50px;

      }
   </style>
</head>

<body>
   <h2>
      CSS justify-items property
   </h2>
   <h4>
      justify-items: normal
   </h4>
   <div class="container">
      <div>
         Item-1
      </div>
      <div>
         Item-2
      </div>
      <div>
         Item-3
      </div>
   </div>
</body>

</html>

使用 Stretch 值的 Justify Items 屬性

要讓網格專案拉伸以填充其網格單元格的整個寬度，我們使用stretch值。這是預設值。以下示例顯示了這一點。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         justify-items: stretch;
         gap: 10px;
         border: 2px solid black;
         height: 150px;
         padding: 5px;
      }

      .container>div {
         background-color: lightgreen;
         text-align: center;
         bordeR: 2px solid green;
         color: white;
         padding: 15px;
         height: 50px;

      }
   </style>
</head>

<body>
   <h2>
      CSS justify-items property
   </h2>
   <h4>
      justify-items: stretch
   </h4>
   <div class="container">
      <div>
         Item-1
      </div>
      <div>
         Item-2
      </div>
      <div>
         Item-3
      </div>
   </div>
</body>

</html>

使用 Start 值的 Justify Items 屬性

要將網格專案對齊到其網格區域的起始邊緣，我們使用start值。在從左到右 (LTR) 的語言中，這等效於 left；在從右到左 (RTL) 的語言中，它對齊到右邊緣。direction 屬性確定起始邊緣。以下示例顯示了這一點。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         justify-items: start;
         gap: 10px;
         border: 2px solid black;
         height: 150px;
         padding: 5px;
      }
      
      .first{
         direction: ltr;
      }
      .second{
         direction: rtl;
      }

      .container>div {
         background-color: lightgreen;
         text-align: center;
         bordeR: 2px solid green;
         color: white;
         padding: 15px;
         height: 50px;

      }
   </style>
</head>

<body>
   <h2>
      CSS justify-items property
   </h2>
   <h4>
      justify-items: start; direction: ltr;
   </h4>
   <div class="container first">
      <div>
         Item-1
      </div>
      <div>
         Item-2
      </div>
      <div>
         Item-3
      </div>
   </div>
   <h4>
      justify-items: start; direction: rtl;
   </h4>
   <div class="container second">
      <div>
         Item-1
      </div>
      <div>
         Item-2
      </div>
      <div>
         Item-3
      </div>
   </div>
</body>

</html>

使用 End 值的 Justify Items 屬性

要將網格專案對齊到其網格區域的結束邊緣，我們使用end值。在 LTR 語言中，這等效於 right；在 RTL 語言中，它對齊到左邊緣。direction 屬性確定結束邊緣。以下示例顯示了這一點。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         justify-items: end;
         gap: 10px;
         border: 2px solid black;
         height: 150px;
         padding: 5px;
      }

      .first {
         direction: ltr;
      }

      .second {
         direction: rtl;
      }

      .container>div {
         background-color: lightgreen;
         text-align: center;
         bordeR: 2px solid green;
         color: white;
         padding: 15px;
         height: 50px;

      }
   </style>
</head>

<body>
   <h2>
      CSS justify-items property
   </h2>
   <h4>
      justify-items: end; direction: ltr
   </h4>
   <div class="container first">
      <div>
         Item-1
      </div>
      <div>
         Item-2
      </div>
      <div>
         Item-3
      </div>
   </div>
   <h4>
      justify-items: end; direction: rtl
   </h4>
   <div class="container second">
      <div>
         Item-1
      </div>
      <div>
         Item-2
      </div>
      <div>
         Item-3
      </div>
   </div>
</body>

</html>

使用 Center 值的 Justify Items 屬性

要將網格專案沿內聯方向對齊到其網格區域的中心，我們使用center值。所有網格專案都在其網格單元格內水平居中對齊。以下示例顯示了這一點。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         justify-items: center;
         gap: 10px;
         border: 2px solid black;
         height: 150px;
         padding: 5px;
      }

      .container>div {
         background-color: lightgreen;
         text-align: center;
         bordeR: 2px solid green;
         color: white;
         padding: 15px;
         height: 50px;

      }
   </style>
</head>

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

</html>

使用 Left 值的 Justify Items 屬性

要將網格專案沿內聯方向對齊到其網格區域的左邊緣，我們使用left值。所有網格專案都與其各自網格單元格的左側齊平。以下示例顯示了這一點。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         justify-items: left;
         gap: 10px;
         border: 2px solid black;
         height: 150px;
         padding: 5px;
      }

      .container>div {
         background-color: lightgreen;
         text-align: center;
         bordeR: 2px solid green;
         color: white;
         padding: 15px;
         height: 50px;

      }
   </style>
</head>

<body>
   <h2>
      CSS justify-items property
   </h2>
   <h4>
      justify-items: left
   </h4>
   <div class="container">
      <div>
         Item-1
      </div>
      <div>
         Item-2
      </div>
      <div>
         Item-3
      </div>
   </div>
</body>

</html>

使用 Right 值的 Justify Items 屬性

要將網格專案沿內聯方向對齊到其網格區域的右邊緣，我們使用right值。所有網格專案都與其各自網格單元格的右側齊平。以下示例顯示了這一點。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         justify-items: right;
         gap: 10px;
         border: 2px solid black;
         height: 150px;
         padding: 5px;
      }

      .container>div {
         background-color: lightgreen;
         text-align: center;
         bordeR: 2px solid green;
         color: white;
         padding: 15px;
         height: 50px;

      }
   </style>
</head>

<body>
   <h2>
      CSS justify-items property
   </h2>
   <h4>
      justify-items: right
   </h4>
   <div class="container">
      <div>
         Item-1
      </div>
      <div>
         Item-2
      </div>
      <div>
         Item-3
      </div>
   </div>
</body>

</html>

使用 Baseline 值的 Justify Items 屬性

要將網格專案沿網格單元格的基線對齊，我們使用baseline值。這對於使用特定基線對齊專案很有用。以下示例顯示了這一點。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         justify-items: baseline;
         gap: 10px;
         border: 2px solid black;
         height: 150px;
         padding: 5px;
      }

      .container>div {
         background-color: lightgreen;
         text-align: center;
         bordeR: 2px solid green;
         color: white;
         padding: 15px;
         height: 50px;

      }
   </style>
</head>

<body>
   <h2>
      CSS justify-items property
   </h2>
   <h4>
      justify-items: baseline
   </h4>
   <div class="container">
      <div>
         Item-1
      </div>
      <div>
         Item-2
      </div>
      <div>
         Item-3
      </div>
   </div>
</body>

</html>

使用 Legacy Right 值的 Justify Items 屬性

此值確保專案根據 CSS 網格規範完全標準化之前瀏覽器實現的行為對齊到其網格單元格的右邊緣。它旨在提供與使用不同對齊系統的舊版瀏覽器行為的向後相容性。以下示例顯示了這一點。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         justify-items: legacy right;
         gap: 10px;
         border: 2px solid black;
         height: 150px;
         padding: 5px;
      }

      .container>div {
         background-color: lightgreen;
         text-align: center;
         bordeR: 2px solid green;
         color: white;
         padding: 15px;
         height: 50px;

      }
   </style>
</head>

<body>
   <h2>
      CSS justify-items property
   </h2>
   <h4>
      justify-items: legacy right
   </h4>
   <div class="container">
      <div>
         Item-1
      </div>
      <div>
         Item-2
      </div>
      <div>
         Item-3
      </div>
   </div>
</body>

</html>

支援的瀏覽器

屬性
justify-items	57.0	16.0	45.0	10.1	44.0

css_properties_reference.htm

列印頁面