place-items

CSS 的 **place-items** 简写属性 允许您同时沿块方向和内联方向对齐项目(即在相关的布局系统(如 网格Flexbox)中使用 align-itemsjustify-items 属性)。如果未设置第二个值,则第一个值也用于第二个值。

试一试

组成属性

此属性是以下 CSS 属性的简写形式

语法

css
/* Positional alignment */
place-items: center;
place-items: normal start;
place-items: center normal;
place-items: start legacy;
place-items: end normal;
place-items: self-start legacy;
place-items: self-end normal;
place-items: flex-start legacy;
place-items: flex-end normal;
place-items: anchor-center;

/* Baseline alignment */
place-items: baseline normal;
place-items: first baseline legacy;
place-items: last baseline normal;
place-items: stretch legacy;

/* Global values */
place-items: inherit;
place-items: initial;
place-items: revert;
place-items: revert-layer;
place-items: unset;

以下形式之一

  • 单个 align-items 值,用于在块方向和内联方向上设置对齐方式。
  • 一个 align-items 值,用于设置块方向上的对齐方式,后跟一个 justify-items 值,用于设置内联方向上的对齐方式。

正式定义

初始值与简写形式的每个属性相同
应用于所有元素
继承
计算值与简写形式的每个属性相同
动画类型离散

正式语法

place-items = 
<'align-items'> <'justify-items'>?

<align-items> =
normal |
stretch |
<baseline-position> |
[ <overflow-position>? <self-position> ] |
anchor-center

<justify-items> =
normal |
stretch |
<baseline-position> |
<overflow-position>? [ <self-position> | left | right ] |
legacy |
legacy && [ left | right | center ] |
anchor-center

<baseline-position> =
[ first | last ]? &&
baseline

<overflow-position> =
unsafe |
safe

<self-position> =
center |
start |
end |
self-start |
self-end |
flex-start |
flex-end

示例

在弹性容器中放置项目

在 Flexbox 中,justify-selfjustify-items 不适用,因为在主轴上,项目被视为一个组。因此,第二个值将被忽略。

CSS

css
#container {
  height: 200px;
  width: 240px;
  place-items: stretch; /* You can change this value by selecting another option in the list */
  background-color: #8c8c8c;
  display: flex;
}

结果

在网格容器中放置项目

以下网格容器包含的项目小于其放置的网格区域,因此 place-items 将在块方向和内联方向上移动它们。

CSS

css
#gridcontainer {
  height: 200px;
  width: 240px;
  place-items: stretch; /* You can change this value by selecting another option in the list */
  background-color: #8c8c8c;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

#gridcontainer > div {
  width: 50px;
}

结果

规范

规范
CSS 盒子对齐模块级别 3
# place-items 属性

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅