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>
列印頁面
上一頁
下一頁
廣告