CSS place-items 属性

简介

CSS place-items 属性是用来设置 flexbox 或 grid container 中的项目在交叉轴上的对齐方式。该属性是以下两个属性的合并简写形式：

1. align-items：用于设置项目在交叉轴上的垂直对齐方式；
2. justify-items：用于设置项目在交叉轴上的水平对齐方式。

语法

grid-container {
  place-items: <align-items> <justify-items>;
}

• <align-items>: 可选值为 start, end, center, stretch, baseline，默认值为 stretch；
• <justify-items>: 可选值为 start, end, center, stretch, baseline，默认值为 stretch。

用法

对 flexbox 布局使用 place-items

.container {
  display: flex;
  place-items: center; /* 将项目在交叉轴上水平和垂直居中 */
}

对 grid 布局使用 place-items

.container {
  display: grid;
  place-items: center; /* 将格子在交叉轴上水平和垂直居中 */
}

分别设置 align-items 和 justify-items

.container {
  display: grid;
  align-items: center; /* 将格子在交叉轴上垂直居中 */
  justify-items: center; /* 将格子在交叉轴上水平居中 */
}

浏览器兼容性

CSS place-items 属性的兼容性如下：

• Chrome：88+
• Firefox：82+
• Safari：14+
• Opera：74+
• Edge：88+

总结

CSS place-items 属性是一个方便的属性，通过简单的设置，我们可以轻松地对 flexbox 或 grid 中的项目进行水平和垂直居中。它用于提高布局的灵活性和效果。将 CSS place-items 属性纳入你的布局库中，可以更好地控制你的网页布局，使其更加具有吸引力和可读性。