1. Web
  2. CSS
  3. justify-items

justify-items

Baseline 廣泛可用 *

此功能已相當成熟，可在多種裝置和瀏覽器版本上使用。自 ⁨2016 年 7 月⁩起，所有瀏覽器均已支援此功能。

* 此特性的某些部分可能存在不同級別的支援。

CSS 的 justify-items 屬性為容器盒中的所有專案定義了預設的 justify-self，從而為每個專案在相應軸向上的對齊方式提供了一種預設方法。

試一試

justify-items: stretch;

justify-items: center;

justify-items: start;

justify-items: end;

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">
      <div>One</div>
      <div>Two</div>
      <div>Three</div>
    </div>
  </div>
</section>

#example-element {
  border: 1px solid #c5c5c5;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 40px;
  grid-gap: 10px;
  width: 220px;
}

#example-element > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
}

此屬性的效果取決於我們所處的佈局模式

語法

css
/* Basic keywords */
justify-items: normal;
justify-items: stretch;

/* Positional alignment */
justify-items: center; /* Pack items around the center */
justify-items: start; /* Pack items from the start */
justify-items: end; /* Pack items from the end */
justify-items: flex-start; /* Equivalent to 'start'. Note that justify-items is ignored in flexbox layouts. */
justify-items: flex-end; /* Equivalent to 'end'. Note that justify-items is ignored in flexbox layouts. */
justify-items: self-start;
justify-items: self-end;
justify-items: left; /* Pack items from the left */
justify-items: right; /* Pack items from the right */
justify-items: anchor-center;

/* Baseline alignment */
justify-items: baseline;
justify-items: first baseline;
justify-items: last baseline;

/* Overflow alignment (for positional alignment only) */
justify-items: safe center;
justify-items: unsafe center;

/* Legacy alignment */
justify-items: legacy right;
justify-items: legacy left;
justify-items: legacy center;

/* Global values */
justify-items: inherit;
justify-items: initial;
justify-items: revert;
justify-items: revert-layer;
justify-items: unset;

此屬性可以採用四種不同形式之一

  • 基本關鍵字：normal 或 stretch 關鍵字之一。
  • 基線對齊：baseline 關鍵字，可選擇性地加上 first 或 last 之一。
  • 位置對齊：center、start、end、flex-start、flex-end、self-start、self-end、left 或 right 之一。可選擇性地加上 safe 或 unsafe。
  • 舊式對齊：legacy 關鍵字，後跟 left 或 right 之一。

值

normal

此關鍵字的效果取決於我們所處的佈局模式

  • 在塊級佈局中，該關鍵字是 start 的同義詞。
  • 在絕對定位佈局中，該關鍵字在可替換的絕對定位盒上的行為類似於 start，在所有其他絕對定位盒上的行為類似於 stretch。
  • 在表格單元格佈局中，此關鍵字沒有意義，因為該屬性被忽略。
  • 在 Flexbox 佈局中，此關鍵字沒有意義，因為該屬性被忽略。
  • 在網格佈局中，此關鍵字的行為類似於 stretch，但對於具有縱橫比或固有尺寸的盒，其行為類似於 start。
start

在適當的軸向上，專案被緊密地打包到對齊容器的起始邊緣。

end

在適當的軸向上，專案被緊密地打包到對齊容器的結束邊緣。

flex-start

對於非彈性容器子項的專案，此值的處理方式同 start。

flex-end

對於非彈性容器子項的專案，此值的處理方式同 end。

self-start

在適當的軸向上，專案被緊密地打包到對齊容器中專案起始側的邊緣。

self-end

在適當的軸向上，專案被緊密地打包到對齊容器中專案結束側的邊緣。

center

專案被緊密地打包到對齊容器的中心。

left

專案被緊密地打包到對齊容器的左邊緣。如果屬性的軸向與內聯軸不平行，則此值的行為類似於 start。

在適當的軸向上，專案被緊密地打包到對齊容器的右邊緣。如果屬性的軸向與內聯軸不平行，則此值的行為類似於 start。

baseline、first baseline、last baseline

指定參與第一條或最後一條基線對齊：將盒的第一條或最後一條基線集的對齊基線，與基線共享組中所有盒的共享第一條或最後一條基線集中的相應基線對齊。first baseline 的回退對齊方式是 start，last baseline 的是 end。

stretch

如果專案的組合尺寸小於對齊容器的尺寸，任何尺寸為 auto 的專案都會等量增加其尺寸（非按比例），同時仍然遵守 max-height/max-width（或等效功能）施加的約束，以使組合尺寸正好填滿對齊容器。

anchor-center

對於錨點定位的元素，將專案在內聯方向上對齊到關聯錨點元素的中心。參見使用 anchor-center 在錨點上居中。

safe

如果專案的尺寸溢位對齊容器，則該專案將改為按對齊模式為 start 的方式對齊。

unsafe

無論專案和對齊容器的相對尺寸如何，給定的對齊值都會被遵守。

legacy

使該值被盒的後代繼承。請注意，如果一個後代的值為 justify-self: auto，則該後代不會考慮 legacy 關鍵字，而只會考慮與其關聯的 left、right 或 center 值。

正式定義

初始值legacy
應用於所有元素
繼承性否
計算值同指定值
動畫型別離散

正式語法

justify-items = 
  normal                                              |
  stretch                                             |
  <baseline-position>                                 |
  <overflow-position>? [ <self-position> | left | right ]  |
  legacy                                              |
  legacy && [ left | right | center ]                 |
  anchor-center                                       |
  dialog                                              

<baseline-position> = 
  [ first | last ]?  &&
  baseline           

<overflow-position> = 
  unsafe  |
  safe    

<self-position> = 
  center      |
  start       |
  end         |
  self-start  |
  self-end    |
  flex-start  |
  flex-end

示例

基本演示

在此示例中，我們有一個 2x2 的網格佈局。最初，網格容器的 justify-items 值為 stretch（預設值），這使得網格專案拉伸以填滿其單元格的整個寬度。

但是，如果你將滑鼠懸停在網格容器上或透過 Tab 鍵聚焦到它，它的 justify-items 值會變為 center，這使得網格專案只佔據其內容寬度，並在其單元格的中心對齊。

HTML

html
<article class="container" tabindex="0">
  <span>First child</span>
  <span>Second child</span>
  <span>Third child</span>
  <span>Fourth child</span>
</article>

CSS

css
html {
  font-family: "Helvetica", "Arial", sans-serif;
  letter-spacing: 1px;
}

article {
  background-color: red;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 40px;
  grid-gap: 10px;
  margin: 20px;
  width: 300px;
  justify-items: stretch;
}

article:hover,
article:focus {
  justify-items: center;
}

article span {
  background-color: black;
  color: white;
  margin: 1px;
  text-align: center;
}

article,
span {
  padding: 10px;
  border-radius: 7px;
}

結果

規範

規範
CSS Box Alignment Module Level 3
# justify-items-property

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 ，由 MDN 貢獻者們修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題
© . Content available under a Creative Commons license.