place-items 是 CSS 中的一个简写属性，它允许在相关的布局（如 Grid 或 Flexbox）中同时沿着块级和内联方向对齐元素。这个属性是 align-items 和 justify-items 属性的简写形式。如果未提供第二个值，则第一个值将作为第二个值的默认值。

基本用法

place-items 属性可以接受以下类型的值：

  • 关键字值：如 normal、stretch、center、start、end、self-start、self-end、flex-start、flex-end、left、right、baseline、first baseline、last baseline 等。这些值用于指定元素的对齐方式。
  • 全局值：如 inherit、initial、unset 等，这些值可以应用于任何 CSS 属性。
语法
place-items: <align-items> <justify-items>?;
  • 1.

其中，<align-items> 和 <justify-items> 各自接受上述的关键字值或全局值。如果 <justify-items> 未被指定，则它默认使用 <align-items> 的值。

示例

在 Grid 布局中，你可以这样使用 place-items 属性来同时设置元素在水平和垂直方向上的对齐方式：

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  place-items: center; /* 水平和垂直方向都居中 */
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.

或者，你可以分别指定水平和垂直方向上的对齐方式：

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  place-items: start end; /* 垂直方向从起始位置开始，水平方向到结束位置结束 */
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
兼容性

place-items 属性在现代浏览器中得到了广泛的支持，但在编写 CSS 时仍然需要考虑向后兼容性问题。你可以通过查阅相关的浏览器兼容性数据或使用自动前缀工具来确保你的代码在尽可能多的浏览器上都能正常工作。

总结

place-items 是一个强大的简写属性，它允许你通过单个声明同时设置 Grid 或 Flexbox 布局中元素的对齐方式。通过合理地使用这个属性，你可以轻松地实现各种复杂的布局效果。