grid子项对齐属性justify-self和align-self

在CSS Grid布局中，justify-self 和 align-self 属性用于控制单个网格项（grid item）在其单元格（cell）内的对齐方式。这两个属性分别对应着水平方向和垂直方向的对齐。

justify-self

justify-self 属性定义了网格项在沿着其容器的块轴（block axis，即列方向，在默认方向下）的对齐方式。它可以有以下值：

• start：网格项对齐到单元格的起始边缘。
• end：网格项对齐到单元格的结束边缘。
• center：网格项在其单元格中居中对齐（沿块轴）。
• stretch（默认值）：如果网格项的大小没有显式指定（或者其大小是自动的），则它会拉伸以填满单元格的块轴长度。

align-self

align-self 属性定义了网格项在沿着其容器的行内轴（inline axis，即行方向，在默认方向下）的对齐方式。它可以有以下值：

• start：网格项对齐到单元格的起始边缘。
• end：网格项对齐到单元格的结束边缘。
• center：网格项在其单元格中居中对齐（沿行内轴）。
• stretch（默认值）：如果网格项的大小没有显式指定（或者其大小是自动的），则它会拉伸以填满单元格的行内轴长度。
• baseline：如果网格项的行内轴是基线对齐的，则网格项将按照该基线对齐。

使用示例

假设你有一个基本的Grid布局，你想要将一个特定的网格项在其单元格内水平和垂直居中对齐：

<style>
  .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 100px);
    gap: 10px;
  }

  .grid-item {
    background-color: rgba(255, 99, 71, 0.5);
    border: 1px solid rgba(0, 0, 0, 0.8);
    padding: 20px;
  }

  .center-item {
    justify-self: center;
    align-self: center;
  }
</style>

<div class="grid-container">
  <div class="grid-item">Item 1</div>
  <div class="grid-item center-item">Centered Item</div>
  <div class="grid-item">Item 3</div>
  <!-- 其他网格项 -->
</div>

在这个例子中，.center-item 类的网格项将在其单元格内水平和垂直居中对齐。注意，justify-self 和 align-self 的影响取决于网格容器的justify-items和align-items属性（它们定义了默认的对齐方式），但justify-self和align-self可以覆盖这些默认值，为单个网格项提供特定的对齐设置。