place-content

CSS 中的 place-content 属性是 align-content 和 justify-content 属性的简写形式，将它们组合到 CSS 网格和 Flexbox 布局中的单个声明中，其中 align-content 和 justify-content 是在块和内联方向上对齐单个项目的值。

.element {
  display: flex;
  place-content: start space-evenly;
}

因此，与其像这样写出 align-content 和 justify-content

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

…我们可以声明 place-content，它接受这两个值

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

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

.item {
  display: grid;
  place-content: self-start;
}

…与编写以下内容相同

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

语法

这只是说 place-content 接受两个值，第一个是 align-content 属性值，第二个是 justify-content 属性值的一种花哨说法。

place-content: <'align-content'> <'justify-content'>?

• 初始值：normal
• 应用于：块级容器、弹性容器和网格容器
• 继承：否
• 计算值：按指定
• 动画类型：离散

值

从 MDN 直接提取 的一些很棒的值和值对示例

/* Positional alignment */
/* align-content does not take left and right values */
place-content: center start;
place-content: start center;
place-content: end left;
place-content: flex-start center;
place-content: flex-end center;

/* Baseline alignment */
/* justify-content does not take baseline values */
place-content: baseline center;
place-content: first baseline space-evenly;
place-content: last baseline right;

/* Distributed alignment */
place-content: space-between space-evenly;
place-content: space-around space-evenly;
place-content: space-evenly stretch;
place-content: stretch space-evenly;

/* Global values */
place-content: inherit;
place-content: initial;
place-content: unset;

有时有视觉效果会有所帮助

位置对齐值

当我们谈论“位置”对齐时，我们指的是指示容器项对齐哪个边的命名值。 所有这些值都适用于 align-content 和 justify-content，但 left 和 right 除外，它们不受 justify-content 支持。

• self-start：这将元素与容器的起始边对齐。
• self-end：这将元素与容器的结束边对齐。
• flex-start：这用于弹性布局中，其中元素与容器的起始边对齐。
• flex-end：这用于弹性布局中，其中元素与容器的结束边对齐。
• center：这将元素在其容器内居中。
• left：这将元素与容器的左边缘对齐。
• right：这将元素与容器的右边缘对齐。

基线对齐值

基线以一种将顶部或底部边缘对齐的方式，通过匹配组内所有元素的基线来对齐所有元素（即一行内的单元格）。

• baseline：这通过将元素的基线与组的基线匹配来对齐组内的元素。 如果单独使用 baseline，则默认为 first。
• first baseline：这将框的第一个基线集的基线与基线共享组中所有框的共享第一个基线集中的相应基线对齐。 回退对齐方式是 start。
• last baseline：这将框的最后一个基线集的基线与基线共享组中所有框的共享最后一个基线集中的相应基线对齐。 回退对齐方式是 end。

分布式对齐值

元素应该如何在容器中分布？ 它们应该散开吗？ 它们应该拉伸以填充可用空间吗？ 以下是这些值定义的内容。

• space-between：元素在对齐容器内均匀分布。 每对相邻项目之间的间距相同。
• space-around: 元素在对齐容器内均匀分布。每对相邻项目之间的间距相同。
• space-evenly: 元素在对齐容器内均匀分布。每对元素之间的间距完全相同。
• stretch: 用于在两个轴上拉伸项目，同时仍尊重 max-height 和 max-width 属性（或等效功能）施加的约束。

示例

place-content: space-around start;

元素周围有呼吸空间 (space-around)，并且它们与容器的起始边缘 (start) 对齐。

place-content: end center;

元素在块方向上与容器的结束边缘 (end) 对齐，然后在内联方向上居中。

place-content: space-between center;

在这里，我们在块方向上将元素推到容器的相对边缘 (space-between)，然后在内联方向上居中 (center) 它们。

演示

在下面的演示中尝试使用控件，看看更改 place-content 的值如何改变元素的对齐方式。

浏览器支持

此属性包含在CSS Box Alignment Model Level 3 规范中，该规范目前处于工作草案状态。

浏览器支持在 CSS Grid 和 Flexbox 布局中都很广泛且稳定。

网格支持

IE	Edge	Firefox	Chrome	Safari	Opera
否	79+	53+	59+	11+	46+

Safari iOS	Chrome Android	Firefox Android	Android 浏览器	Opera Mobile
90+	87+	90+	11+	59+

Flexbox 支持

IE	Edge	Firefox	Chrome	Safari	Opera
否	79+	45+	59+	9+	46+

Safari iOS	Chrome Android	Firefox Android	Android 浏览器	Opera Mobile
14.5+	90+	87+	90+	62+

更多信息

相关属性