1. Web
  2. CSS
  3. justify-self

justify-self

Baseline 廣泛可用 *

此功能已非常成熟，可在多種裝置和瀏覽器版本上使用。自 2017 年 10 月以來，它已在各大瀏覽器中可用。

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

CSS justify-self 屬性設定了盒子在其對齊容器內沿適當軸線對齊的方式。

試一試

justify-self: stretch;

justify-self: center;

justify-self: start;

justify-self: end;

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

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

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

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

  • 在塊級佈局中，它將專案在其包含塊的內聯軸上對齊。
  • 對於絕對定位的元素，它將專案在其包含塊的內聯軸上對齊，同時考慮了 top、left、bottom 和 right 的偏移值。
  • 在表格單元格佈局中，此屬性被忽略。閱讀更多關於塊、絕對定位和表格佈局中的對齊。
  • 在 Flexbox 佈局中，此屬性被忽略。閱讀更多關於Flexbox 中的對齊。
  • 在 Grid 佈局中，它將專案在其網格區域的內聯軸上對齊。閱讀更多關於Grid 佈局中的對齊。

語法

css
/* Basic keywords */
justify-self: auto;
justify-self: normal;
justify-self: stretch;

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

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

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

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

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

  • 基本關鍵字：關鍵字值 normal、auto 或 stretch 之一。
  • 基線對齊：baseline 關鍵字，可選地加上 first 或 last 之一。
  • 位置對齊
    • 以下之一：center、start、end、flex-start、flex-end、self-start、self-end、left 或 right。
    • 可選地加上 safe 或 unsafe。

值

auto

使用的值是父盒子的 justify-items 屬性的值，除非盒子沒有父級，或者被絕對定位，在這些情況下，auto 表示 normal。

normal

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

  • 在塊級佈局中，該關鍵字是 start 的同義詞。
  • 在絕對定位佈局中，該關鍵字在可替換的絕對定位盒子上表現得像 start，而在所有其他絕對定位盒子上表現得像 stretch。
  • 在表格單元格佈局中，該關鍵字沒有意義，因為此屬性被忽略。
  • 在 Flexbox 佈局中，該關鍵字沒有意義，因為此屬性被忽略。
  • 在 Grid 佈局中，該關鍵字的行為類似於 stretch，但對於具有寬高比或固有大小的盒子，其行為類似於 start。
start

專案沿著對齊容器在適當軸線上的起始邊緣緊密排列。

end

專案沿著對齊容器在適當軸線上的結束邊緣緊密排列。

flex-start

對於不是 Flex 容器子項的專案，此值被視為 start。

flex-end

對於不是 Flex 容器子項的專案，此值被視為 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

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

正式定義

初始值auto
應用於塊級盒子、絕對定位盒子和網格專案
繼承性否
計算值同指定值
動畫型別離散

正式語法

justify-self = 
  auto                                                |
  normal                                              |
  stretch                                             |
  <baseline-position>                                 |
  <overflow-position>? [ <self-position> | left | right ]  |
  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

示例

基本演示

在下面的示例中，我們有一個 2 x 2 的網格佈局。最初，網格容器的 justify-items 值為 stretch——預設值——這使得網格專案橫跨其單元格的整個寬度。

然後，第二個、第三個和第四個網格專案被賦予不同的 justify-self 值，以展示這些值如何覆蓋 justify-items 值。這些值使得網格專案僅與其內容寬度一樣寬，並以不同的位置在其單元格中對齊。

HTML

html
<article class="container">
  <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;
}

span:nth-child(2) {
  justify-self: start;
}

span:nth-child(3) {
  justify-self: center;
}

span:nth-child(4) {
  justify-self: end;
}

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-self 屬性

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

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

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