DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 价值200美元的免费积分!
CSS 中的 place-items
属性是 align-items
和 justify-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+
参考资料
- CSS 框对齐模型级别 3 – 最初定义
place-items
属性的官方规范。 - Mozilla 开发者网络 – Mozilla 团队的文档。
- 框对齐备忘单 – Rachel Andrew 的大纲是理解对齐术语及其定义的超级有用的资源。