CSS - place-self 屬性

上一頁
下一頁

CSS place-self 是一個簡寫屬性，它同時在塊級和內聯方向上對齊單個專案，類似於網格或 Flexbox 等佈局系統中的 align-self 和 justify-self 屬性。如果沒有設定第二個值，則使用第一個值。

此屬性是以下 CSS 屬性的簡寫

可能的值

  • auto − 根據父元素的 align-self 值對齊專案。

  • normal− 基於佈局模式，normal 關鍵詞的效果會發生變化

    • 當佈局為絕對定位時，在替換的絕對定位框中表現為start，在所有其他絕對定位框中表現為stretch。

    • 在絕對定位佈局的靜態位置中表現為stretch。

    • 對於彈性專案，表現為stretch。

    • 對於網格專案，表現類似於stretch，除了具有縱橫比或內在尺寸的框，在這些框中表現為start。

    • 不適用於塊級框和表格單元格。

  • self-start− 專案在交叉軸上對齊到對應於專案起始側的對齊容器的邊緣。

  • self-end − 專案在交叉軸上對齊到對應於專案結束側的對齊容器的邊緣。

  • flex-start − 將彈性專案的交叉起始邊距邊緣與行的交叉起始邊緣對齊。

  • flex-end− 將彈性專案的交叉結束邊距邊緣與行的交叉結束邊緣對齊。

  • center− 彈性專案框的邊距在交叉軸上的行內居中。當元素的交叉尺寸大於容器時，內容在兩個方向上溢位相同。

  • baseline, first baseline, last baseline −

    • first baseline 和 last baseline 是 baseline 的同義詞。First 和 last 指的是彈性專案內的行框。

    • 這些值指定在內容對齊中是否涉及首行基線或末行基線對齊。

    • start 是 first-baseline 的回退對齊方式，end 是 last-baseline 的回退對齊方式。

  • stretch − 當專案連同交叉軸的組合尺寸小於容器尺寸，並且專案大小為auto時，其尺寸會等比例增加，同時保持max-height / max-width的值。

應用於

塊級框、絕對定位框和網格專案。

語法

關鍵字值

place-self: auto center;
place-self: normal start;

位置對齊

place-self: center normal;
place-self: start auto;
place-self: end normal;
place-self: self-start auto;
place-self: self-end normal;
place-self: flex-start auto;
place-self: flex-end normal;

基線對齊

place-self: baseline normal;
place-self: first baseline auto;
place-self: last baseline normal;
place-self: stretch auto;

CSS place-self - normal start 值

以下示例演示了place-self: normal start 屬性將專案 2 對齊到其網格單元格的起始位置 -

<html>
<head>
<style>
   .container {
      background-color: red;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-auto-rows: 100px;
      grid-gap: 10px;
      margin: 20px;
      width: 300px;
   }
   .container > div {
      background-color: greenyellow;
      border: 3px solid blue;
      text-align: center;
      margin: 5px;
      width: 60px;
      height: 50px;
   }
   .item2 {
      place-self: normal start;
   }
</style>
</head>
<body>
   <div class="container">
      <div>Item 1</div>
      <div class="item2">Item 2</div>
      <div>Item 3</div>
      <div>Item 4</div>
   </div>
</body>
</html>

CSS place-self - auto center 值

以下示例演示了place-self: auto center 屬性將專案 2 對齊到其網格單元格的中心位置 -

<html>
<head>
<style>
   .container {
      background-color: red;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-auto-rows: 100px;
      grid-gap: 10px;
      margin: 20px;
      width: 300px;
   }
   .container > div {
      background-color: greenyellow;
      border: 3px solid blue;
      text-align: center;
      margin: 5px;
      width: 60px;
      height: 50px;
   }
   .item2 {
      place-self: auto center;
   }
</style>
</head>
<body>
   <div class="container">
      <div>Item 1</div>
      <div class="item2">Item 2</div>
      <div>Item 3</div>
      <div>Item 4</div>
   </div>
</body>
</html>

CSS place-self - center normal 值

以下示例演示了place-self: center normal 屬性將專案 2 水平居中和垂直居中在其網格單元格中 -

<html>
<head>
<style>
   .container {
      background-color: red;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-auto-rows: 100px;
      grid-gap: 10px;
      margin: 20px;
      width: 300px;
   }
   .container > div {
      background-color: greenyellow;
      border: 3px solid blue;
      text-align: center;
      margin: 5px;
      width: 60px;
      height: 50px;
   }
   .item2 {
      place-self: center normal;
   }
</style>
</head>
<body>
   <div class="container">
      <div>Item 1</div>
      <div class="item2">Item 2</div>
      <div>Item 3</div>
      <div>Item 4</div>
   </div>
</body>
</html>

CSS place-self - end normal 值

以下示例演示了place-self: end normal 屬性將專案 2 水平對齊到其網格單元格的右邊緣，並垂直對齊到其網格單元格的頂部邊緣 -

<html>
<head>
<style>
   .container {
      background-color: red;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-auto-rows: 100px;
      grid-gap: 10px;
      margin: 20px;
      width: 300px;
   }
   .container > div {
      background-color: greenyellow;
      border: 3px solid blue;
      text-align: center;
      margin: 5px;
      width: 60px;
      height: 50px;
   }
   .item2 {
      place-self: end normal;
   }
</style>
</head>
<body>
   <div class="container">
      <div>Item 1</div>
      <div class="item2">Item 2</div>
      <div>Item 3</div>
      <div>Item 4</div>
   </div>
</body>
</html>

CSS place-self - start auto 值

以下示例演示了place-self: start auto 屬性將專案 2 對齊到其網格單元格的起始位置 -

<html>
<head>
<style>
   .container {
      background-color: red;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-auto-rows: 100px;
      grid-gap: 10px;
      margin: 20px;
      width: 300px;
   }
   .container > div {
      background-color: greenyellow;
      border: 3px solid blue;
      text-align: center;
      margin: 5px;
      width: 60px;
      height: 50px;
   }
   .item2 {
      place-self: start auto;
   }
</style>
</head>
<body>
   <div class="container">
      <div>Item 1</div>
      <div class="item2">Item 2</div>
      <div>Item 3</div>
      <div>Item 4</div>
   </div>
</body>
</html>

CSS place-self - self-start auto 值

以下示例演示了place-self: self-start auto 屬性將專案 2 垂直定位在行的起始位置，並在水平方向上自動定位 -

<html>
<head>
<style>
   .container {
      background-color: red;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-auto-rows: 100px;
      grid-gap: 10px;
      margin: 20px;
      width: 300px;
   }
   .container > div {
      background-color: greenyellow;
      border: 3px solid blue;
      text-align: center;
      margin: 5px;
      width: 60px;
      height: 50px;
   }
   .item2 {
      place-self: self-start auto;
   }
</style>
</head>
<body>
   <div class="container">
      <div>Item 1</div>
      <div class="item2">Item 2</div>
      <div>Item 3</div>
      <div>Item 4</div>
   </div>
</body>
</html>

CSS place-self - self-end normal 值

以下示例演示了place-self: self-end normal 屬性將專案 2 垂直對齊到底部，並水平對齊到其網格單元格的起始位置 -

<html>
<head>
<style>
   .container {
      background-color: red;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-auto-rows: 100px;
      grid-gap: 10px;
      margin: 20px;
      width: 300px;
   }
   .container > div {
      background-color: greenyellow;
      border: 3px solid blue;
      text-align: center;
      margin: 5px;
      width: 60px;
      height: 50px;
   }
   .item2 {
      place-self: self-end normal;
   }
</style>
</head>
<body>
   <div class="container">
      <div>Item 1</div>
      <div class="item2">Item 2</div>
      <div>Item 3</div>
      <div>Item 4</div>
   </div>
</body>
</html>

CSS place-self - flex-start auto 值

以下示例演示了place-self: flex-start auto 屬性將專案 2 垂直對齊到左邊緣，並水平對齊到其網格單元格的頂部 -

<html>
<head>
<style>
   .container {
      background-color: red;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-auto-rows: 100px;
      grid-gap: 10px;
      margin: 20px;
      width: 300px;
   }
   .container > div {
      background-color: greenyellow;
      border: 3px solid blue;
      text-align: center;
      margin: 5px;
      width: 60px;
      height: 50px;
   }
   .item2 {
      place-self: flex-start auto;
   }
</style>
</head>
<body>
   <div class="container">
      <div>Item 1</div>
      <div class="item2">Item 2</div>
      <div>Item 3</div>
      <div>Item 4</div>
   </div>
</body>
</html>

CSS place-self - flex-end normal 值

以下示例演示了place-self: flex-end normal 屬性將專案 2 對齊到其網格單元格的右邊緣 -

<html>
<head>
<style>
   .container {
      background-color: red;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-auto-rows: 100px;
      grid-gap: 10px;
      margin: 20px;
      width: 300px;
   }
   .container > div {
      background-color: greenyellow;
      border: 3px solid blue;
      text-align: center;
      margin: 5px;
      width: 60px;
      height: 50px;
   }
   .item2 {
      place-self: flex-end normal;
   }
</style>
</head>
<body>
   <div class="container">
      <div>Item 1</div>
      <div class="item2">Item 2</div>
      <div>Item 3</div>
      <div>Item 4</div>
   </div>
</body>
</html>

CSS place-self - baseline normal 值

以下示例演示了place-self: baseline normal 屬性將專案 2 對齊到其網格單元格的基線 -

<html>
<head>
<style>
   .container {
      background-color: red;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-auto-rows: 100px;
      grid-gap: 10px;
      margin: 20px;
      width: 300px;
   }
   .container > div {
      background-color: greenyellow;
      border: 3px solid blue;
      text-align: center;
      margin: 5px;
      width: 60px;
      height: 50px;
   }
   .item2 {
      place-self: baseline normal;
   }
</style>
</head>
<body>
   <div class="container">
      <div>Item 1</div>
      <div class="item2">Item 2</div>
      <div>Item 3</div>
      <div>Item 4</div>
   </div>
</body>
</html>

CSS place-self - last baseline normal 值

以下示例演示了place-self: last baseline normal 屬性將專案 2 對齊到其網格單元格的最後一行基線 -

<html>
<head>
<style>
   .container {
      background-color: red;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-auto-rows: 100px;
      grid-gap: 10px;
      margin: 20px;
      width: 300px;
   }
   .container > div {
      background-color: greenyellow;
      border: 3px solid blue;
      text-align: center;
      margin: 5px;
      width: 60px;
      height: 50px;
   }
   .item2 {
      place-self: last baseline normal;
   }
</style>
</head>
<body>
   <div class="container">
      <div>Item 1</div>
      <div class="item2">Item 2</div>
      <div>Item 3</div>
      <div>Item 4</div>
   </div>
</body>
</html>

CSS place-self - stretch auto 值

以下示例演示了place-self: stretch auto 屬性水平拉伸專案 2 以填充其網格單元格中的可用空間 -

<html>
<head>
<style>
   .container {
      background-color: red;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-auto-rows: 100px;
      grid-gap: 10px;
      margin: 20px;
      width: 300px;
   }
   .container > div {
      background-color: greenyellow;
      border: 3px solid blue;
      text-align: center;
      margin: 5px;
      width: 60px;
      min-height: 50px;
   }
   .item2 {
      place-self: stretch auto;
   }
</style>
</head>
<body>
   <div class="container">
      <div>Item 1</div>
      <div class="item2">Item 2</div>
      <div>Item 3</div>
      <div>Item 4</div>
   </div>
</body>
</html>
列印頁面
上一頁
下一頁
廣告