在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>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.

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