CSS - justify-self 屬性

上一頁
下一頁

CSS justify-self 屬性透過為所有盒子專案設定預設的 justify-self 值，來提供每個盒子在相關軸上的預設對齊方式。

語法

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

屬性值

值 描述
auto 它繼承網格容器的 justify-items 屬性值。預設值。
normal 它取決於佈局模式，對於網格佈局，它與“stretch”相同。
stretch 如果未設定寬度，它會拉伸以填充網格單元格。
start 它將專案與對齊容器的內聯方向邊緣的起始位置對齊。
left 它將專案與對齊容器的左邊緣對齊。
center 它將專案與對齊容器的中心邊緣對齊。
end 它將專案與對齊容器的內聯方向邊緣的結束位置對齊。
right 它將專案與對齊容器的右邊緣對齊。
溢位對齊
  • safe：如果專案的大小超過對齊容器，則專案的對齊模式設定為“start”。
  • unsafe：無論專案和對齊容器的相對大小如何，都會遵守指定的對齊值。
基線對齊 元素與父元素的基線對齊。
initial 它將屬性設定為其預設值。
inherit 它從父元素繼承屬性。

CSS Justify Self 屬性示例

以下示例解釋了使用不同值的justify-self 屬性。

使用 Auto 值的 Justify Self 屬性

要讓網格專案根據網格容器的justify-items 屬性指定的預設對齊方式進行對齊，我們使用auto 值。網格專案將使用為容器設定的對齊行為。在以下示例中，justify-items 已設定為“stretch”。

示例

<!DOCTYPE html>
<html>

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

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

      .item {
         justify-self: auto;
      }
   </style>
</head>

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

</html>

使用 Normal 值的 Justify Self 屬性

normal 值類似於auto 值，因為它通常對應於預設的對齊行為。它通常根據網格容器的預設設定對齊專案。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

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

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

      .item {
         justify-self: normal;
      }
   </style>
</head>

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

</html>

使用 Stretch 值的 Justify Self 屬性

要使網格專案拉伸以填充其網格單元格的整個寬度，我們使用stretch 值。它確保專案擴充套件以適應可用空間。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

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

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

      .item {
         justify-self: stretch;
      }
   </style>
</head>

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

</html>

使用 Start 值的 Justify Self 屬性

要將網格專案與網格單元格的起始邊緣對齊，我們使用start 值。在從左到右 (LTR) 的語言中，這等效於向左對齊；在從右到左 (RTL) 的語言中，它向右對齊。direction 屬性決定起始邊緣。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

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

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

      .first-container {
         direction: ltr;
      }

      .second-container {
         direction: rtl;
      }

      .item {
         justify-self: start;
      }
   </style>
</head>

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

</html>

使用 End 值的 Justify Self 屬性

將網格專案與網格單元格的結束邊緣對齊，我們使用end 值。在從左到右 (LTR) 的語言中，這等效於向右對齊；在從右到左 (RTL) 的語言中，它向左對齊。direction 屬性決定結束邊緣。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

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

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

      .first-container {
         direction: ltr;
      }

      .second-container {
         direction: rtl;
      }

      .item {
         justify-self: end;
      }
   </style>
</head>

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

</html>

使用 Center 值的 Justify Self 屬性

要將網格專案與網格單元格的中心對齊，我們使用center 值。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

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

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

      .item {
         justify-self: center;
      }
   </style>
</head>

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

</html>

使用 Left 值的 Justify Self 屬性

要將網格專案與網格單元格的左邊緣對齊，我們使用left 值。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

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

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

      .item {
         justify-self: left;
      }
   </style>
</head>

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

</html>

使用 Right 值的 Justify Self 屬性

要將網格專案與網格單元格的右邊緣對齊，我們使用right 值。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

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

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

      .item {
         justify-self: right;
      }
   </style>
</head>

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

</html>

使用 Last Baseline 值的 Justify Self 屬性

要將網格專案與其基線與網格單元格的最後一個基線對齊，我們使用last baseline 值。這對於對齊文字元素很有用，以便每個網格專案中的最後一行文字水平對齊。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

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

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

      .item {
         justify-self: last baseline;
      }
   </style>
</head>

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

</html>

支援的瀏覽器

屬性 Chrome Edge Firefox Safari Opera
justify-self 57.0 16.0 45.0 10.1 44.0
css_properties_reference.htm
列印頁面
上一頁
下一頁
廣告