CSS中的网格布局（Grid Layout）网格项对齐与排列属性详解

描述
CSS Grid布局中的网格项对齐与排列属性用于控制网格项在网格区域内的对齐方式。这些属性包括justify-items、align-items、justify-self、align-self、justify-content和align-content。理解这些属性的区别和应用场景对于精确控制网格布局至关重要。

详细讲解

1. 基本概念

• 网格项对齐控制的是网格项在其所在网格区域内的位置
• 分为两个轴向：主轴（行轴，水平方向）和交叉轴（列轴，垂直方向）
• 有两组属性：一组控制单个网格项，一组控制所有网格项

2. 容器级对齐属性

2.1 justify-items（主轴对齐）

• 控制所有网格项在网格区域内的水平对齐
• 取值：
  • start：左对齐
  • end：右对齐
  • center：居中对齐
  • stretch：拉伸填充（默认值）

.grid-container {
  justify-items: center; /* 所有网格项水平居中 */
}

2.2 align-items（交叉轴对齐）

• 控制所有网格项在网格区域内的垂直对齐
• 取值与justify-items相同
• 默认值也是stretch

.grid-container {
  align-items: end; /* 所有网格项底部对齐 */
}

3. 单个网格项对齐属性

3.1 justify-self（单个项主轴对齐）

• 控制单个网格项的水平对齐，会覆盖justify-items的设置
• 取值与justify-items相同

.grid-item {
  justify-self: start; /* 这个特定项左对齐 */
}

3.2 align-self（单个项交叉轴对齐）

• 控制单个网格项的垂直对齐，会覆盖align-items的设置
• 取值与align-items相同

.grid-item {
  align-self: center; /* 这个特定项垂直居中 */
}

4. 网格容器对齐属性

4.1 justify-content（整体水平对齐）

• 当网格总尺寸小于容器时，控制整个网格在容器中的水平位置
• 取值：
  • start、end、center：与前面相同
  • stretch：网格项拉伸填充容器
  • space-around：均匀分布，项两侧有相等空间
  • space-between：首项在开头，末项在末尾，中间均匀分布
  • space-evenly：项之间和边缘的空间都相等

.grid-container {
  justify-content: space-between;
}

4.2 align-content（整体垂直对齐）

• 当网格总高度小于容器时，控制整个网格在容器中的垂直位置
• 取值与justify-content相同

.grid-container {
  align-content: center;
}

5. 实际应用示例

.grid-container {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-template-rows: 100px 100px;
  width: 300px;
  height: 300px;
  justify-items: center;    /* 所有项水平居中 */
  align-items: center;      /* 所有项垂直居中 */
  justify-content: center;  /* 整个网格水平居中 */
  align-content: center;    /* 整个网格垂直居中 */
}

.special-item {
  justify-self: start;      /* 这个项左对齐 */
  align-self: end;          /* 这个项底部对齐 */
}

6. 记忆技巧

• justify-开头的属性控制水平方向
• align-开头的属性控制垂直方向
• -items控制所有网格项在各自区域内的对齐
• -self控制单个网格项的对齐
• -content控制整个网格在容器中的位置

理解这些属性的层次关系：-content控制网格整体，-items控制网格项默认行为，-self用于特殊项的个性化设置。