CSS place-content 属性
示例
指定弹性线对齐到弹性容器底部，并使弹性项目在水平方向上具有相同的间距
#container {
display: flex;
place-content: end space-between;
}
亲自试一试 »
更多“亲自试一试”示例如下。
定义和用法
The place-content 属性用于弹性盒和网格布局，它是以下属性的简写属性
如果 place-content 属性有两个值
- place-content: start center;
- align-content 属性值为 'start'
- justify-content 属性值为 'center'
如果 place-content 属性有一个值
- place-content: end;
- align-content 和 justify-content 属性值均为 'end'
| 默认值 | normal |
|---|---|
| 继承 | 否 |
| 可动画 | 否。 了解有关 可动画 的信息 |
| 版本 | 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 设置任何属性值相同。 | 演示 ❯ |
| stretch | 网格：如果未设置大小，则将网格项目拉伸以填充网格容器。 弹性盒：如果弹性项目在交叉轴上没有指定大小，则在交叉轴上拉伸弹性项目以填充弹性容器。 |
演示 ❯ |
| start | 将项目对齐到容器的开头 | 演示 ❯ |
| end | 将项目对齐到容器的末尾 | 演示 ❯ |
| center | 将项目对齐到容器的中心 | 演示 ❯ |
| space-between | 在两个轴上将可用额外空间均匀分布在容器内的元素之间。 | 演示 ❯ |
| space-around | 在两个轴上将可用额外空间均匀分布在容器内每个元素周围。 | 演示 ❯ |
| space-evenly | 在两个轴上均匀分布容器内的元素。 | 演示 ❯ |
| overflow-alignment |
|
|
| initial | 将此属性设置为其默认值。 了解有关 initial 的信息 | |
| inherit | 从其父元素继承此属性。 了解有关 inherit 的信息 |
更多示例
使用网格的示例
块方向上的可用额外空间均匀分布在每个网格项目周围，并且网格项目在内联方向上对齐到中心
#container {
display: grid;
place-content: space-around center;
}
亲自试一试 »
相关页面
CSS 教程：CSS 弹性盒
CSS 教程：CSS 网格
CSS 参考：align-content 属性
CSS 参考：justify-content 属性
HTML DOM 参考：alignContent 属性
