Css 简明教程

CSS - place-self Property

CSS place-self 是一个简写属性，用于同时在块方向和行内方向对单个的项进行对齐，类似于网格或弹性盒布局系统中的 align-self 和 justify-self 等属性。如果没有设置第二个值，将使用第一个值。

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

Possible Values

auto − 根据父级的 align-self 值对项进行对齐。
normal − 根据布局模式， normal 关键字的效果发生变化：布局为 absolutely-positioned 时，在替换绝对定位框中表现为 start ，而在其他所有绝对定位框中表现为 stretch 。在绝对定位布局的静态位置表现为 stretch 。对于 flex 项，表现为 stretch 。对于 grid 项，表现与 stretch 类似，但对于具有纵横比或内在大小的框，则表现为 start 。不适用于块级框以及表格单元格。
self-start − 在交叉轴中，将项对齐到与项的开始侧相对应的对齐容器的边缘。
self-end − 在交叉轴中，将项对齐到与项的结束侧相对应的对齐容器的边缘。
flex-start − 将 flex 项的 cross-start 边距边缘与行的 cross-start 边缘对齐。
flex-end − 将 flex 项的 cross-end 边距边缘与行的 cross-end 边缘对齐。
center ——弹性元素框的边距在交叉轴上的线内居中。当一个元素的交叉尺寸大于容器尺寸时，内容将在两个方向上均匀地溢出。
baseline, first baseline, last baseline ——第一个基线和最后一个基线与基线同义。 First 和 last 指的是弹性元素内的线框。这些值指定了第一个或最后一个基线对齐在内容对齐中的介入度。 start 是 first-baseline 的备用对齐， end 是 last-baseline 的备用对齐。
stretch ——当沿交叉轴的元素的结合尺寸小于容器尺寸，并且元素大小被指定为 auto 时，它的尺寸会相等地增加，保持 max-height / max-width 的值。

Applies To

块级框，绝对定位的框和网格项目。

Syntax

Keyword Values

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

Positional Alignment

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;

Baseline Alignment

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

CSS place-self - normal start Value

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

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

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

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

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

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

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

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

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

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

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

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