CSS place-items 屬性

定義和用法

place-items 屬性用于網格布局，是以下屬性的簡寫：

• align-items
• justify-items

如果 place-items 屬性有兩個值：

place-items: start center;

• align-items 屬性的值為 'start'
• justify-items 屬性的值為 'center'

如果 place-items 屬性只有一個值：

place-items: end;

• 則 align-items 和 justify-items 屬性的值均為 'end'

實例

例子 1

將每個 <div> 元素在其網格單元格的行內方向和塊方向上都放置在開始位置：

#container {
  place-items: start;
}

親自試一試

例子 2：書寫模式

當網格容器的 writing-mode 屬性值設置為 'vertical-rl' 時，塊方向的結束位置從底部移動到左側，行內方向的結束位置從右側移動到底部：

#container {
  place-items: end;
  writing-mode: vertical-rl;
}

親自試一試

例子 3：彈性盒布局

justify-items 屬性對彈性盒布局不適用。因此，如果在彈性盒布局中使用 place-items 屬性，justify-items 的值（即第二個值）會被忽略。

#wrapper {
  place-items: stretch end;
}

親自試一試

CSS 語法

place-items: normal legacy|value|initial|inherit;

屬性值

技術細節

瀏覽器支持

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

相關頁面

教程：CSS 網格布局

教程：CSS 彈性盒布局

參考：CSS align-items 屬性

參考：CSS justify-items 屬性

參考：CSS writing-mode 屬性