CSS place-content 属性
示例
将 flex 行对齐到 flex 容器的底部，并在水平方向上使 flex 项之间具有相同的空间
#container {
display: flex;
place-content: end space-between;
}
自己动手试一试 »
更多“自己尝试”的例子见下文。
定义和用法
place-content 属性用于 flexbox 和 grid 布局，是以下属性的简写属性：
如果 place-content 属性有两个值
- place-content: start center;
- align-content 属性值为 'start'
- justify-content 属性值为 'center'
如果 place-content 属性有一个值
- place-content: end;
- align-content 和 justify-content 属性值均为 'end'
| 默认值 | normal |
|---|---|
| 继承 | no |
| 可动画 | 否。 阅读关于可动画属性 |
| 版本 | CSS3 |
| JavaScript 语法 | object.style.placeContent="end space-around" 尝试一下 |
浏览器支持
表中的数字指定了完全支持该属性的第一个浏览器版本。
| 属性 | |||||
|---|---|---|---|---|---|
| place-content | 59.0 | 79.0 | 53.0 | 11.0 | 46.0 |
CSS 语法
place-content: normal|value|initial|inherit;
属性值
| 值 | 描述 | 演示 |
|---|---|---|
| normal | 默认值。取决于布局上下文。与设置 align-content 和 justify-content 的 no property value 相同。 | 演示 ❯ |
| stretch | Grid：如果未设置大小，则拉伸 grid 项目以填充 grid 容器。 Flexbox：如果 flex 项在交叉轴上没有指定大小，则拉伸 flex 项以填充 flex 容器。 |
演示 ❯ |
| start | 将项目对齐到容器的开头 | 演示 ❯ |
| end | 将项目对齐到容器的末尾 | 演示 ❯ |
| center | 将项目对齐到容器的中心 | 演示 ❯ |
| space-between | 在容器的两个轴上均匀分布元素之间的可用额外空间。 | 演示 ❯ |
| space-around | 在容器的两个轴上均匀分布每个元素周围的可用额外空间。 | 演示 ❯ |
| space-evenly | 在两个轴上均匀分布容器内的元素。 | 演示 ❯ |
| overflow-alignment |
|
|
| initial | 将此属性设置为其默认值。阅读关于initial | |
| inherit | 从其父元素继承此属性。阅读关于inherit |
更多示例
Grid 示例
块方向上的可用额外空间在每个 grid 项周围均匀分布，grid 项在内联方向上对齐到中心
#container {
display: grid;
place-content: space-around center;
}
自己动手试一试 »
相关页面
CSS 教程：CSS Flexbox
CSS 教程： CSS Grid
CSS 参考：align-content 属性
CSS 参考：justify-content 属性
HTML DOM 参考：alignContent 属性
