CSS - 内容放置

上一页
下一页

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

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

可能的值

  • start − 项目在相应轴上相对于容器的起始边缘彼此对齐。

  • end − 项目在相应轴上相对于容器的结束边缘彼此对齐。

  • flex-start − 将项目与弹性容器的开头对齐。

  • flex-end − 将项目与弹性容器的结尾对齐。

  • center − 将项目与弹性容器的中心对齐。

  • left − 将项目与对齐容器的左侧对齐。如果属性的轴线不平行于内联轴线，则此值的作用类似于 start。

  • right − 将项目与对齐容器的右侧边缘对齐，在适当的轴线上。如果属性的轴线不平行于内联轴线，则此值的作用类似于 start。

  • space-between − 对齐容器内的项目均匀分布，相邻项目之间具有相同的间距，第一个和最后一个项目与 main-start 和 main-end 边缘对齐。

  • baseline, first baseline, last baseline −

    • 这些值指定在内容对齐中是否涉及第一个或最后一个基线对齐。

    • 第一个和最后一个基线是基线的同义词。First 和 last 指的是弹性项目中的行框。

    • start 是 first-baseline 的回退对齐，end 是 last-baseline 的回退对齐。

  • space-around − 对齐容器内的项目均匀分布。每对相邻元素在第一个和最后一个元素之前具有相同的间距，该间距是相邻元素之间距离的一半。

  • space-evenly − 对齐容器内的项目均匀分布，相邻项目之间以及 main-start 和 main-end 边缘处具有相同的间距。

  • stretch − 如果项目沿主轴的总大小小于对齐容器，则自动调整大小的项目会平等地增加其大小以填充容器，同时尊重 max-height/max-width 约束。

  • safe − 与对齐关键字一起使用，当项目溢出容器导致任何数据丢失时，对齐将设置为 start 值。

  • 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 如何将弹性项目水平对齐到中心，垂直对齐到容器的顶部：

<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 如何将弹性项目水平对齐到容器的左边缘，垂直对齐到容器的中心：

<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 如何将弹性项目水平对齐到右侧边缘，垂直对齐到底部边缘：

<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 如何将弹性项目水平对齐到左边缘，垂直对齐到容器的中心：

<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 如何将弹性项目水平对齐到右端，垂直对齐到容器的中心：

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

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

以下示例演示了属性 place-content: space-between 如何在弹性容器内的弹性项目之间均匀分布空间：

<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 如何在弹性容器内的弹性项目周围均匀分布空间：

<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 如何在弹性容器内的弹性项目之间和周围均匀分布空间：

<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>
打印页面
上一页
下一页
广告

© . All rights reserved.