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

© . All rights reserved.