CSS place-content（放置内容）属性是一个简写属性，它同时对齐块（列）和内联（行）轴上的内容。它用于在单个声明中设置 align-content 和 justify-content 属性。
此属性是以下 CSS 属性的简写：
可能的值
- start − 项目在相应轴上与容器的起始边缘对齐。
- end − 项目在相应轴上与容器的末端边缘对齐。
- flex-start - 对齐 flex 容器开头的项目。
- flex-end − 对齐 flex 容器末端的项。
- center − 将物品对齐在柔性容器的中心。
- left − 将项目与对齐容器的左侧对齐。如果属性的轴不平行于内联轴，则此值的作用类似于 start。
- right − 将项目与对齐容器的右边缘对齐，并沿适当的轴对齐。如果属性的轴不平行于内联轴，则此值的作用类似于 start。
- space-between − 对齐容器中的项均匀分布，相邻项之间的间距相等，第一个和最后一个项与主开始和主端边缘对齐。
- baseline, first baseline, last baseline −
- 这些值指定在内容对齐过程中第一次或最后一次基线对齐的参与。
- 第一个和最后一个基线是基线的同义词。First 和 last 是指 flex 项中的行框。
- start 是第一基线的回退对齐，结束是最后一基线e 的回退对齐。
- space-around - 对齐容器中的项目均匀分布。每对相邻元素在第一个和最后一个项目之前具有相同的间距，是相邻项目之间距离的一半。
- space-evenly- 对齐容器中的项目均匀分布，相邻项目之间以及 main-start 和 main-end 的间距相等。
- stretch − 如果沿主轴的项目总大小小于对齐容器，则自动调整大小的项目将相等地增加其大小以填充容器，同时遵守最大高度/最大宽度约束。
- safe - 与对齐关键字一起使用，当项目溢出容器时，导致任何数据丢失，将对齐方式根据起始值设置。
- unsafe - 与对齐关键字一起使用，即使项目溢出容器，导致任何数据丢失，也会遵守传递的对齐值。
适用于
多线柔性集装箱。
语法
位置对准
place-content: center start;
place-content: start center;
place-content: end left;
place-content: flex-start center;
place-content: flex-end center;
基线对齐
place-content: baseline center;
place-content: first baseline space-evenly;
place-content: last baseline right;
分布式对齐
place-content: space-between space-evenly;
place-content: space-around space-evenly;
place-content: space-evenly stretch;
place-content: stretch space-evenly;
第一个属性值是 align-content，第二个属性值是 justify-content。
如果缺少第二个值，则只要第一个值有效，它就对两者都使用。如果对两者都无效，则整个值无效。
CSS place-content - 居中开始值
以下示例演示了属性 place-content： center start 将 flex 项水平对准中心，垂直对准容器的顶部 -
<html>
<head>
<style>
.flex-container {
background-color: red;
height: 300px;
border: 2px solid black;
display: flex;
flex-wrap: wrap;
place-content: center start;
}
.flex-container > div {
flex-basis: 100px;
height: 50px;
margin: 5px;
background-color: greenyellow;
}
</style>
</head>
<body>
<div class="flex-container">
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
<div>Flex item 4</div>
<div>Flex item 5</div>
<div>Flex item 6</div>
<div>Flex item 7</div>
</div>
</body>
</html>
CSS place-content - 开始中心值
以下示例演示了属性 place-content： start center 沿容器的左边缘水平和对齐 flex 项在容器的中心水平和垂直对齐 -
<html>
<head>
<style>
.flex-container {
background-color: red;
height: 300px;
border: 2px solid black;
display: flex;
flex-wrap: wrap;
place-content: start center;
}
.flex-container > div {
flex-basis: 100px;
height: 50px;
margin: 5px;
background-color: greenyellow;
}
</style>
</head>
<body>
<div class="flex-container">
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
<div>Flex item 4</div>
<div>Flex item 5</div>
<div>Flex item 6</div>
<div>Flex item 7</div>
</div>
</body>
</html>
CSS place-content - 结束权利值
以下示例演示了属性 place-content： end right 将 flex 项水平对齐到右边缘，垂直对齐下边缘 -
<html>
<head>
<style>
.flex-container {
background-color: red;
height: 300px;
border: 2px solid black;
display: flex;
flex-wrap: wrap;
place-content: end right;
}
.flex-container > div {
flex-basis: 100px;
height: 50px;
margin: 5px;
background-color: greenyellow;
}
</style>
</head>
<body>
<div class="flex-container">
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
<div>Flex item 4</div>
<div>Flex item 5</div>
<div>Flex item 6</div>
<div>Flex item 7</div>
</div>
</body>
</html>
CSS place-content - flex-start center 值
以下示例演示了属性 place-content： flex-start center 将 flex 项水平对准左边缘，垂直对准容器的中心 -
<html>
<head>
<style>
.flex-container {
background-color: red;
height: 300px;
border: 2px solid black;
display: flex;
flex-wrap: wrap;
place-content: flex-start center;
}
.flex-container > div {
flex-basis: 100px;
height: 50px;
margin: 5px;
background-color: greenyellow;
}
</style>
</head>
<body>
<div class="flex-container">
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
<div>Flex item 4</div>
<div>Flex item 5</div>
<div>Flex item 6</div>
<div>Flex item 7</div>
</div>
</body>
</html>
CSS place-content - flex-end center 值
以下示例演示了属性 place-content： flex-end center 将 flex 项水平对准右端，垂直对准容器的中心 -
<html>
<head>
<style>
.flex-container {
background-color: red;
height: 300px;
border: 2px solid black;
display: flex;
flex-wrap: wrap;
place-content: flex-end center;
}
.flex-container > div {
flex-basis: 100px;
height: 50px;
margin: 5px;
background-color: greenyellow;
}
</style>
</head>
<body>
<div class="flex-container">
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
<div>Flex item 4</div>
<div>Flex item 5</div>
<div>Flex item 6</div>
<div>Flex item 7</div>
</div>
</body>
</html>
CSS place-content - 最后基线值
以下示例演示了属性 place-content： last baseline property 最后一行项与该行上最高项的基线对齐 -
<html>
<head>
<style>
.flex-container {
background-color: red;
height: 300px;
border: 2px solid black;
display: flex;
flex-wrap: wrap;
place-content: last baseline;
}
.flex-container > div {
flex-basis: 100px;
height: 50px;
margin: 5px;
background-color: greenyellow;
}
</style>
</head>
<body>
<div class="flex-container">
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
<div>Flex item 4</div>
<div>Flex item 5</div>
<div>Flex item 6</div>
<div>Flex item 7</div>
</div>
</body>
</html>
CSS place-content - 值之间的空格
以下示例演示了属性 place-content： space-between 属性在 flex 容器内的 flex 项之间均匀分配空间 -
<html>
<head>
<style>
.flex-container {
background-color: red;
height: 300px;
border: 2px solid black;
display: flex;
flex-wrap: wrap;
place-content: space-between;
}
.flex-container > div {
flex-basis: 100px;
height: 50px;
margin: 5px;
background-color: greenyellow;
}
</style>
</head>
<body>
<div class="flex-container">
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
<div>Flex item 4</div>
<div>Flex item 5</div>
<div>Flex item 6</div>
<div>Flex item 7</div>
</div>
</body>
</html>
CSS place-content - 空格值
以下示例演示了属性 place-content：space-around property 均匀地分配了 flex 容器内的 flex 项周围的空间 -
<html>
<head>
<style>
.flex-container {
background-color: red;
height: 300px;
border: 2px solid black;
display: flex;
flex-wrap: wrap;
place-content: space-around;
}
.flex-container > div {
flex-basis: 100px;
height: 50px;
margin: 5px;
background-color: greenyellow;
}
</style>
</head>
<body>
<div class="flex-container">
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
<div>Flex item 4</div>
<div>Flex item 5</div>
<div>Flex item 6</div>
<div>Flex item 7</div>
</div>
</body>
</html>
CSS place-content - space-evenly 值
以下示例演示了属性 place-content： space-evenly property 均匀地分配空间，均匀地（在和周围）flex 容器内的 flex 项 -
<html>
<head>
<style>
.flex-container {
background-color: red;
height: 300px;
border: 2px solid black;
display: flex;
flex-wrap: wrap;
place-content: space-around;
}
.flex-container > div {
flex-basis: 100px;
height: 50px;
margin: 5px;
background-color: greenyellow;
}
</style>
</head>
<body>
<div class="flex-container">
<div>Flex item 1</div>
<div>Flex item 2</div>
<div>Flex item 3</div>
<div>Flex item 4</div>
<div>Flex item 5</div>
<div>Flex item 6</div>
<div>Flex item 7</div>
</div>
</body>
</html>
