place-items

Avatar of Geoff Graham
Geoff Graham

DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 价值200美元的免费积分!

CSS 中的 place-items 属性是 align-itemsjustify-items 属性的简写形式,将它们组合成一个声明。

常见的用法是使用 Grid 进行水平和垂直居中。

.center-inside-of-me {
  display: grid;
  place-items: center;
}

这些属性随着 Flexbox 和 Grid 布局的引入而得到使用,但也应用于

  • 块级框
  • 绝对定位框
  • 绝对定位框的静态位置
  • 表格单元格

语法

此属性接受双值,第一个值用于 align-items,第二个值用于 justify-items。 作为复习,align-items 沿着垂直(列)轴对齐内容,而 justify-items 沿着水平(行)轴对齐。

.item {
  display: grid;
  place-items: start center;
}

这与编写以下代码相同

.item {
  display: grid;
  align-items: start;
  justify-items: center;
}

如果只提供一个值,则会设置这两个属性。 例如,这个

.item {
  display: grid;
  place-items: start;
}

…与编写以下代码相同

.item {
  display: grid;
  align-items: start;
  justify-items: start;
}

接受的值

使此属性有趣的是它根据其使用上下文表现出不同的行为。 例如,某些值仅适用于 Flexbox,在 Grid 设置中不起作用。 此外,某些值适用于 align-items 属性,而其他值适用于 justify-items 侧。

此外,值本身可以被认为属于几种类型的对齐方式:上下文、分布位置(如果直接应用于布局中的子元素,则变为 自我位置)和 基线

Rachel Andrew 有一张很棒的 框对齐备忘单,有助于说明这些值的效用。

类型描述
auto上下文该值根据元素的上下文进行相应调整。 它使用元素父元素的 justify-items 值。 如果不存在父元素或将其应用于使用 absolute 定位的元素,则该值变为 normal
normal上下文采用其应用布局上下文的默认行为。

• 块级布局:start
• 绝对定位:对于替换的绝对元素为 start,对于其他所有元素为 stretch
• 表格布局:忽略值
• Flexbox 布局:忽略值
• Grid 布局:stretch,除非使用纵横比或 固有大小,在这种情况下它表现得像 start
stretch分布对于 align-items,将元素扩展到容器的两个垂直边缘,对于 justify-items,将元素扩展到容器的两个水平边缘。
start位置所有元素在容器的起始(左侧)边缘彼此对齐
end位置所有元素在容器的结束(右侧)边缘彼此对齐
center位置项目彼此相邻,朝向容器的中心对齐
left位置项目彼此相邻,朝向容器的左侧对齐。 如果该属性不平行于标准的顶部、右侧、底部、左侧轴,则它表现得像 end
right位置项目彼此相邻,朝向容器的右侧对齐。 如果该属性不平行于标准的顶部、右侧、底部、左侧轴,则它表现得像 start
flex-start位置仅 Flexbox 值(回退到 start),其中项目朝向容器的起始边缘堆积。
flex-end位置仅 Flexbox 值(回退到 end),其中项目朝向容器的结束边缘堆积。
self-start自我位置允许布局中的项目根据其自身的起始侧在容器边缘对齐自身。 基本上覆盖了父元素上的设置值。
self-end自我位置允许布局中的项目根据其自身的结束侧在容器边缘对齐自身,而不是继承容器的位置值。 基本上覆盖了父元素上的设置值。
first baseline
last baseline
基线通过匹配对齐基线将一组元素(例如一行中的单元格)中的所有元素对齐。 如果单独使用 baseline,则默认为 first

浏览器支持

此属性包含在 CSS 框对齐模型级别 3 规范 中。

浏览器支持 非常广泛且稳定

  • Edge 79+(Chromium 后)
  • Firefox 45+
  • Chrome 59+
  • Safari 11+

参考资料