Place-Content CSS 属性

place-content 是一个 CSS 属性，用于在容器中定义项目的内容位置。它像 justify-content 和 align-items 属性一样工作，但是可以控制项目在整个容器中的水平和垂直位置。

语法

place-content: <align-content> <justify-content>;

align-content 可选值包括：

• normal
• baseline
• center
• start
• end
• flex-start
• flex-end
• stretch
• space-between
• space-around
• space-evenly

justify-content 可选值包括：

• normal
• left
• right
• center
• start
• end
• flex-start
• flex-end
• stretch
• space-between
• space-around
• space-evenly

其中，align-content 控制条目在垂直方向上的位置，而 justify-content 控制该位置在水平方向上的位置。

示例

1. 居中对齐

以下代码将容器中的项目居中对齐。

.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

2. 列表对齐

以下代码将列表居中对齐，并将项目在列表中居中对齐。

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

3. 等分空间

以下代码将容器中的项目等分空间。

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: space-evenly;
  justify-content: space-evenly;
}

浏览器兼容性

place-content 属性兼容以下浏览器：

• Chrome 52+
• Firefox 48+
• Safari 10+
• Opera 39+

总结

place-content 是一个非常有用的属性，它可以让开发者更好地控制页面上的内容位置。使用 place-content 属性，开发者可以轻松地实现很多常用的页面布局效果，例如居中对齐、列表对齐和等分空间等。