place-items

CSS 中的 place-items 是一个简写属性 ,它允许你在相关的布局(如 Grid 或 Flexbox)中可以同时沿着块级和内联方向对齐元素 (例如:align-items 和 justify-items 属性) 。如果未提供第二个值,则第一个值作为第二个值的默认值。

构成属性

该属性是以下两个 CSS 属性的简写:

语法

/* Keyword values */
place-items: auto center;
place-items: normal start;

/* Positional alignment */
place-items: center normal;
place-items: start auto;
place-items: end normal;
place-items: self-start auto;
place-items: self-end normal;
place-items: flex-start auto;
place-items: flex-end normal;
place-items: left auto;
place-items: right normal;

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

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

auto
auto 实际的值继承父自元素的 justify-items 值,除非该元素没有父元素或是用了绝对定位。在这些示例中,auto 表示 normal 。
normal
normal 的效果取决于我们使用哪种布局方式:
  • 在块级布局中,normalstart 一样。
  • 在绝对定位布局中,关键字在被替换的绝对定位元素上的行为类似于 start,在所有其他绝对定位的元素上表现类似 stretch
  • 在表格单元格布局中,此关键字没有意义,因为该属性被忽略
  • 在 flexbox 布局中,此关键字没有意义,因为该属性被忽略
  • 在 grid 布局中,此关键字和 stretch 的行为相似,但是具有宽高比和固有尺寸的元素行为和 start 相似。
start
在适当的轴线上,元素块沿着对齐容器的起始边缘对齐。
end
在适当的轴线上,元素块沿着对齐容器的结束边缘对齐。
flex-start
对齐方式取决于 flex 容器的的开始方向。(水平和垂直两个方向)
这只对 flex 布局元素生效,对于不是 flex 容器的子元素,它被视为 start
flex-end
对齐方式取决于 flex 容器的的结束方向。(水平和垂直两个方向)
这只对 flex 布局元素生效,对于不是 flex 容器的子元素,它被视为 end 。
self-start
沿着轴线的头部对齐。
self-end
沿着轴线的尾部对齐。
center
沿着对齐容器的中心对齐。
left
沿着对齐容器的左侧对齐,如果属性的轴不与内联轴平行,则该值的行为和 start 类似。
right
沿着对齐容器的右侧对齐,如果属性的轴不与内联轴平行,则该值的行为和 start 类似。
baseline
first baseline

last baseline
指定参与第一个或最后一个基线对齐:元素的第一个或最后一个基线集的对齐基线与基线共享组中所有框共享的第一个或最后一个基线集中相应的基线对齐。
first baseline 的回退对齐方式为 startlast baseline 则为 end
stretch
如果子项加起来的尺寸小于对齐容器的尺寸,则任何未尺寸为 auto 的项将增加同等的大小(不是按比例),但也会受到 max-height/max-width (或等同的功能)的限制,因此所有项刚好能填满对齐容器。

形式定义

初始值as each of the properties of the shorthand:
适用元素all elements
是否是继承属性
计算值as each of the properties of the shorthand:
Animation typediscrete

形式语法

示例

在弹性容器中排列元素

CSS

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

.flex {
  display: flex;
  flex-wrap: wrap;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 50px);
}

结果

规范

Specification Status Comment
CSS Box Alignment Module Level 3
place-items
Working Draft Initial definition

浏览器兼容性

BCD tables only load in the browser

See also