Atributo CSS place-content

Definición y uso

place-content La propiedad se utiliza para el diseño de cajas elásticas (flexbox) y grilla (grid) y es un atajo para las siguientes propiedades:

Si la propiedad place-content tiene dos valores:

place-content: start center;
  • El valor de la propiedad align-content es 'start'
  • El valor de la propiedad justify-content es 'center'

Si la propiedad place-content tiene solo un valor:

place-content: end;
  • Luego, los valores de las propiedades align-content y justify-content son 'end'

Ejemplo

Ejemplo 1

Ajuste el comportamiento elástico en la parte inferior del contenedor elástico y espacie los elementos elásticos horizontalmente para que tengan el mismo espacio entre ellos:

#container {
  display: flex;
  place-content: end space-between;
}

亲自试一试

例子 2：网格布局

块方向上的额外空间均匀分布在每个网格项目周围，且网格项目在行内方向上居中对齐：

#container {
  display: grid;
  place-content: space-around center;
}

亲自试一试

CSS 语法

place-content: normal|value|initial|inherit;

属性值

值 描述
normal

默认值。取决于布局上下文。

等同于不为 align-content 和 justify-content 设置属性值。
stretch

网格：如果未设置大小，则网格项目会拉伸以填满网格容器。

弹性盒：如果弹性项目在交叉轴上未指定大小，则会在交叉轴上拉伸以填满弹性容器。
start 将项目对齐到容器的开始位置。
end 将项目对齐到容器的结束位置。
center 将项目对齐到容器的中心位置。
space-between 在容器的两个轴上均匀分布可用空间，使项目之间的间距相等。
space-around 在容器的两个轴上均匀分布可用空间，使每个项目周围的间距相等。
space-evenly 在容器的两个轴上均匀分布项目。
overflow-alignment

'safe'：如果内容溢出，则将项目对齐设置为 'start'。

'unsafe'：无论项目内容是否溢出，都保持对齐值不变。
initial 将此属性设置为其默认值。参阅 initial。
inherit 从其父元素继承此属性。参阅 inherit。

技术细节

默认值： normal
继承性： 否
动画制作： 不支持。请参阅：动画相关属性。
版本： CSS3
JavaScript 语法： object.style.placeContent="end space-around"

浏览器支持

表格中的数字表示首个完全支持该属性的浏览器版本。

Chrome Edge Firefox Safari Opera
59.0 79.0 53.0 11.0 46.0

相关页面

教程：CSS Grid Layout

教程：CSS Flexbox Layout

参考：Atributo align-content CSS

参考：Atributo CSS justify-content

参考：Atributo alignContent HTML DOM