CSS justify-items 屬性
更多“自己嘗試”的例子見下文。
定義和用法
justify-items
屬性設定在網格容器上,用於為子元素(網格項)在行內方向上提供對齊。
對於英文頁面,行內方向是從左到右,塊方向是從上到下。
為了使此屬性產生任何對齊效果,網格項需要在行內方向上有可用的空間。
提示: 要在塊方向而不是行內方向上對齊網格項,請使用 align-items
屬性。
瀏覽器支援
表中的數字指定了完全支援該屬性的第一個瀏覽器版本。
屬性 | |||||
---|---|---|---|---|---|
justify-items | 57.0 | 16.0 | 45.0 | 10.1 | 44.0 |
CSS 語法
justify-items: legacy|normal|stretch|位置對齊|溢位對齊|基線對齊|initial|inherit;
屬性值
值 | 描述 | 試一試 |
---|---|---|
舊版 | 預設值。 具有 justify-self 值為 'auto' 的網格項僅繼承網格容器的 justify-items 屬性值,如果該值以 'legacy' 開頭。它用於實現 HTML 〈center〉 元素和 align 屬性的舊版對齊行為。 | 演示 ❯ |
normal | 取決於佈局上下文,但對於網格佈局,類似於 'stretch' | 演示 ❯ |
stretch | 如果未設定 inline-size(寬度),則拉伸以填充網格單元。 | 演示 ❯ |
start | 在行內方向上將項對齊到開頭 | 演示 ❯ |
left | 將項對齊到左側 | 演示 ❯ |
center | 將項對齊到中心 | 演示 ❯ |
end | 在行內方向上將項對齊到末尾 | 演示 ❯ |
right | 將項對齊到右側 | 演示 ❯ |
overflow-alignment |
|
|
baseline alignment | 元素與父元素的基線對齊。 | 演示 ❯ |
initial | 將此屬性設定為其預設值。閱讀關於initial | |
inherit | 從其父元素繼承此屬性。閱讀關於inherit |
更多示例
justify-items 與 justify-self
對齊設定為容器的 'center',並且網格項本身設定為 'right'。屬性值 'right' 優先。
#container {
display: grid;
justify-items: center;
}
.blue {
justify-self: right;
}
自己動手試一試 »
絕對定位網格項上的 justify-items
對齊在絕對定位的網格項上設定為 'right'
#container {
display: grid;
position: relative;
justify-items: right;
}
.blue {
position: absolute;
}
自己動手試一試 »
writing-mode
當網格容器元素的 writing-mode
屬性值為 vertical-rl 時,行內方向是向下。結果是容器的起始端從左側移動到頂部,容器的末端從右側移動到底部。
#container {
justify-items: end;
writing-mode: vertical-rl;
}
自己動手試一試 »
direction
當網格容器元素的 direction
屬性值設定為 'rtl' 時,行內方向是從右到左。結果是容器的起始端從左側移動到右側,容器的末端從右側移動到左側。
#container {
justify-items: start;
direction: rtl;
}
自己動手試一試 »
相關頁面
CSS 教程: CSS Grid
CSS 教程: CSS 定位
CSS 參考: align-items 屬性
CSS 參考: direction 屬性
CSS 參考: grid 屬性
CSS 參考: grid-template-columns 屬性
CSS 參考: justify-self 屬性
CSS 參考: position 屬性
CSS 參考: writing-mode 屬性