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 属性