CSS place-content 属性

指定弹性线与弹性容器的底部对齐，并将弹性项目水平对齐，使其之间具有相同的间距：

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

下面有更多 "亲自试一试" 示例。

定义和用法

这个place-contentproperty 用于 Flexbox 和网格布局，是以下属性的简写属性：

如果 place-content 属性有两个值：

如果 place-content 属性只有一个值：

默认值：	普通的
遗传：	不
可动画：	不。阅读可动画的
版本：	CSS3
JavaScript 语法：	对象.style.placeContent="end space-around"尝试一下

表中的数字指定完全支持该属性的第一个浏览器版本。

Property
place-content	59.0	79.0	53.0	11.0	46.0

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

Value	Description	Demo
normal	Default value. Dependant on layout context. The same as setting no property value for align-content and justify-content.	Demo ❯
stretch	Grid: Stretches grid items to fill the grid container if size is not set. Flexbox: Stretches flex items on the cross axis to fill the flex container if flex items have no specified size on the cross axis.	Demo ❯
start	Align items at the start of the container	Demo ❯
end	Align items at the end of the container	Demo ❯
center	Align items to the center of the container	Demo ❯
space-between	Distribute available extra space evenly between the elements inside the container on both axis.	Demo ❯
space-around	Distribute available extra space evenly around each element inside the container on both axis.	Demo ❯
space-evenly	Distribute elements inside the container evenly on both axis.	Demo ❯
overflow-alignment	'safe' sets alignment of the item to 'start' if the content overflows 'unsafe' keeps the alignment value regardless of wether or not the item content overflows
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit