Css 简明教程

CSS - place-content

CSS place-content 是一个速记属性，它同时在块（列）和内联（行）轴中对齐内容。它用来在单一声明中设置 align-content 和 justify-content 属性。

此属性是下列 CSS 属性的速记：

Possible Values

start - 在相应的轴中，元素彼此针对容器的起始边缘对齐。
end - 在相应的轴中，元素彼此针对容器的结束边缘对齐。
flex-start - 将元素对齐在 flex 容器的起始处。
flex-end - 将元素对齐在 flex 容器的结束处。
center - 将元素对齐在 flex 容器的中心处。
left - 将元素对齐到对齐容器的左侧。如果该属性的轴线不平行于内联轴线，则该值如同 start。
right - 将元素对齐到对齐容器在适当轴线上的右侧边缘。如果该属性的轴线不平行于内联轴线，则该值如同 start。
space-between - 对齐容器内的元素被均匀分布，相邻元素之间的间距相等，首尾元素与 main-start 和 main-end 边缘对齐。
baseline, first baseline, last baseline - 这些值指定了在内容的对齐中，首尾基线对齐的参与。首尾基线是基线的同义词。 First 和 last 指代 flex 元素中的行方框。 start 是 first-baseline 的后备对齐，而 end 是 *last-baselin*e 的后备对齐.
space-around - 对齐容器中的元素被均匀分布。每一对相邻的元素在首尾元素之前都有相同的间距，距离等于相邻元素之间距离的一半。
space-evenly - 对齐容器中的元素被均匀分布，相邻元素之间的间距相等，并且在 main-start 和 main-end 边缘。
stretch - 如果沿主轴线上的元素总大小比对齐容器小，自动大小的元素将平等地增加它们的大小以填充容器，并且遵守 max-height/max-width 约束。
safe - 当使用对齐关键字并且元素溢出容器时，导致任何数据丢失，对齐会按照起始值来设置。
unsafe - 当使用对齐关键字并且即便元素溢出容器，导致任何数据丢失，传递的对齐值也会被遵守。

Applies To

多行 flex 容器。

Syntax

Positional Alignment

place-content: center start;
place-content: start center;
place-content: end left;
place-content: flex-start center;
place-content: flex-end center;

Baseline Alignment

place-content: baseline center;
place-content: first baseline space-evenly;
place-content: last baseline right;

Distributed Alignment

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 Value

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

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

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

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

以下示例演示了属性 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 - last baseline Value

以下示例演示了属性 place-content: last baseline 属性将最后一行的元素对齐到那一行最高元素的基线 −

<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 Value

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

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

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