Css 简明教程

CSS - place-self Property

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

CSS place-self is a shorthand property that aligns the individual items in both block and inline directions simultaneously, similar to properties like align-self and justify-self in layout systems like Grid or Flexbox. The first value is used if the second value is not set.

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

This property is a shorthand for the following CSS properties:

  1. align-self

  2. justify-self

Possible Values

  1. auto − Aligns the item based on the parent’s align-self value.

  2. normal− Based on the layout mode, the effect of normal keyword changes: Behaves like start on replaced absolutely-positioned boxes, and as stretch in all other absolutely-positioned boxes, when the layout is absolutely-positioned. Behaves like stretch in static position of absolutely-positioned layouts. Behaves like stretch for flex items. Behaves similar to stretch for grid items, except for the boxes which have an aspect ratio or an intrinsic size where it behaves like start. Does not apply to block-level boxes , and to the table cells.

  3. self-start− Items are aligned to the edge of the alignment container corresponding to the start side of the item, in the cross-axis.

  4. self-end − Items are aligned to the edge of the alignment container corresponding to the end side of the item, in the cross-axis.

  5. flex-start − Aligns the cross-start margin edge of the flex item with the cross-start edge of the line.

  6. flex-end− Aligns the cross-end margin edge of the flex item with the cross-end edge of the line.

  7. center− Margins of flex-item box is centered within the line on the cross-axis. When the cross-size of an element is larger than the container, the content overflows equally in both directions.

  8. baseline, first baseline, last baseline − First baseline, and last baseline are synonym to baseline. First and last refer to the line boxes within the flex items. These values specify the involvment of first- or last-baseline alignment in the alignment of the content. start is the fallback alignment for first-baseline and end for last-baseline.

  9. stretch − When the combined size of the items along with the cross-axis is less than the size of the container, and the item is sized as auto, its size is increased equally, maintaining the values of max-height / max-width.

Applies To

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

Block-level boxes, absolutely-positioned boxes, and grid items.

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对齐到其网格单元格的开始处——

The following example demonstrates the place-self: normal start property aligns Item 2 to the start of its grid cell −

<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对齐到其网格单元格的中心——

The following example demonstrates the place-self: auto center property aligns Item 2 at the center of its grid cell −

<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水平和垂直方向对齐到其网格单元格的中心——

The following example demonstrates the place-self: center normal property aligns Item 2 at the center horizontally and vertically of its grid cell −

<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的垂直方向和水平方向对齐到其网格单元格的右边缘和上边缘——

The following example demonstrates the place-self: end normal property aligns Item 2 on the right edge of its grid cell vertically and horizontally to the top edge of its grid cell −

<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对齐到其网格单元格的开始处——

The following example demonstrates the place-self: start auto property aligns Item 2 to the start of its grid cell −

<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在垂直方向定位到行开始处，在水平方向上自动定位——

The following example demonstrates the place-self: self-start auto property positioned Item 2 at the start of the row vertically and automatically in the horizontal direction −

<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垂直方向和水平方向对齐到其网格单元格的底部和开始处——

The following example demonstrates the place-self: self-end normal property aligns Item 2 to the bottom vertically and horizontally to the start of its grid cell −

<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的垂直方向和水平方向对齐到其网格单元格的顶部和左边缘——

The following example demonstrates the place-self: flex-start auto property aligns Item 2 to the left edge vertically and horizontally to the top of its grid cell −

<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对齐到其网格单元格的右边缘——

The following example demonstrates the place-self: flex-end normal property aligns Item 2 to the right edge of its grid cell −

<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对齐到其网格单元格的基线——

The following example demonstrates the place-self: baseline normal property aligns Item 2 to the baseline of its grid cell −

<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对齐到其网格单元格的最后一行的基线——

The following example demonstrates the place-self: last baseline normal property aligns Item 2 to the baseline of the last row of its grid cell −

<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水平方向拉伸以填充其网格单元格中可用的空间——

The following example demonstrates the place-self: stretch auto property stretches Item 2 horizontally to fill the available space in its grid cell −

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