CSS place-content - 易学教程，面试笔记经验！

CSS 属性

CSS place-content 是一个简写属性，可同时对齐块（列）轴和内联（行）轴中的内容。它用于设置 align-content 和 align-content 属性在单个声明中。

此属性是以下 CSS 属性的简写:

属性值

start: 项目与每个项目对齐other 相对于相应轴中容器的起始边缘。
end: 项目相对于相应轴中容器的结束边缘彼此对齐。
flex-start: 在 Flex 容器的开头对齐项目。
flex-end: 在末尾对齐项目
center: 在 Flex 容器的中心对齐项目。
left: 将项目对齐对齐容器左侧的项目。如果属性的轴不平行于内联轴，则该值的作用类似于 start。
right: 将项目与相应轴中对齐容器的右边缘对齐。如果属性的轴不平行于内联轴，则该值的作用类似于 start。
space- Between: 对齐容器内的项目均匀分布，相邻项目之间的间距相等，第一个和最后一个项目与主开始和主结束边缘对齐。
baseline、first baseline, last baseline −
- 这些值指定内容对齐中第一个或最后一个基线对齐的情况。
- 第一个和最后一个基线与基线同义。 First 和 Last 指的是 Flex 项目中的行框。
- 开始是第一个基线的后备对齐，结束是最后一个基线的后备对齐。
space-around: 对齐容器内的项目均匀分布。每对相邻元素在第一个和最后一个项目之前具有相同的间距，是相邻项目之间距离的一半。
space-evenly: 对齐容器内的项目均匀分布，相邻项目之间以及主开始和主结束边缘之间的间距相等。
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: center start

以下示例演示属性 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: start center

以下示例演示属性 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: end right

以下示例演示属性 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

下面的示例演示了属性 place-content:最后一个基线属性，最后一行项目与该行最高项目的基线对齐 -

<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: space-between

以下示例演示属性 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: space-around

以下示例演示属性 place-content:space-around 属性在 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 属性均匀地在 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>