CSS justify-self 屬性

定義和用法

justify-self 屬性在其網格單元格內沿行內方向對齊網格項。

對于英文頁面，行內方向是從左到右，塊方向是向下。

如需使此屬性具有任何對齊效果，網格項需要在行內方向上在自身周圍留出可用空間。

提示：如需在塊方向而不是行內方向對齊網格項，請使用 align-self 屬性 或 align-items 屬性 屬性。

另請參閱：

CSS 教程：CSS Grid

CSS 教程：CSS 定位

CSS 參考手冊：align-content 屬性

CSS 參考手冊：align-items 屬性

CSS 參考手冊：align-self 屬性

CSS 參考手冊：direction 屬性

CSS 參考手冊：grid 屬性

CSS 參考手冊：grid-template-columns 屬性

CSS 參考手冊：position 屬性

CSS 參考手冊：writing-mode 屬性

另請參閱：

實例

例子 1

在其網格單元的右側對齊網格項：

.red {
  display: grid;
  justify-self: right;
}

親自試一試

例子 2：justify-self 對比 justify-items

相對于容器的對齊方式設置為“居中”，網格項目本身設置為“右對齊”。屬性值 'right' 占上風：

#container {
  display: grid;
  justify-items: center;
}
.blue {
  justify-self: right;
}

親自試一試

例子 3：在絕對定位的網格項目上設置 justify-self

將絕對定位的網格項的對齊方式設置為 'right'：

#container {
  display: grid;
  position: relative;
}
.red {
  position: absolute;
  justify-self: right;
}

親自試一試

例子 4：writing-mode

當網格容器元素的 writing-mode 屬性值設置為 vertical-rl 時，行內方向為向下。結果是容器的起點從左側移到頂部，容器的末端從右側移到底部：

#container {
  display: grid;
  writing-mode: vertical-rl;
}
.blue {
  justify-self: end;
}

親自試一試

例子 5：direction

網格容器元素的 direction 屬性值設置為“rtl”時，行內方向是從右到左。結果是容器的起點從左側移到右側，容器的末端從右側移到左側：

#container {
  display: grid;
  direction: rtl;
}
.blue {
  justify-self: end;
}

親自試一試

CSS 語法

justify-self: auto|normal|stretch|positional alignment|overflow-alignment|baseline alignment|initial|inherit;

屬性值

值 描述
auto 默認值。繼承網格容器的 justify-self 屬性值。
normal

取決于布局上下文，但類似于未設置 size 時網格項在網格布局中的 'stretch'。

如果設置了 size ，則屬性值的行為類似于 'start'。
stretch 如果未設置 inline-size（寬度），則拉伸以填充網格單元格。
start 在行內方向的開頭對齊項目。
left 將項目左對齊。
center 將項目對齊到中心。
end 在行內方向的末尾對齊項目。
right 將項目右對齊。
overflow-alignment
  • 'safe' 會將項目的對齊方式設置為 'start'，如果內容溢出。
  • 'unsafe' 保持對齊值，無論項目內容是否溢出。
baseline alignment 元素與父元素的基線對齊。
initial 將此屬性設置為其默認值。參閱 initial。
inherit 從其父元素繼承此屬性。參閱 inherit。

技術細節

默認值： auto
繼承： 否
動畫制作： 不支持。請參閱：動畫相關屬性。
版本： CSS3
JavaScript 語法： object.style.justifySelf="right"

瀏覽器支持

表中的數字注明了首個完全支持該屬性的瀏覽器版本。

Chrome Edge Firefox Safari Opera
Chrome IE / Edge Firefox Safari Opera
57.0 16.0 45.0 10.1 44.0