Properti place-items CSS

Definisi dan penggunaan

place-items Atribut ini digunakan untuk layout kisi, adalah singkatan dari berikut ini:

• align-items
• justify-items

Jika atribut place-items memiliki dua nilai:

place-items: start center;

• Nilai atribut align-items adalah 'start'
• Nilai atribut justify-items adalah 'center'

Jika atribut place-items hanya memiliki satu nilai:

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;

属性值

技术细节

浏览器支持

表格中的数字表示首个完全支持该属性的浏览器版本。

相关页面

Layout grid CSSCSS 网格布局

Layout grid CSSPanduan：

Layout kotak lurus CSSAtribut align-items CSS

Layout kotak lurus CSSAtribut justify-items CSS

Layout kotak lurus CSSAtribut writing-mode CSS