CSSGrid对齐属性详解：align-content和justify-content用法

掌握CSS Grid布局中的对齐技巧至关重要！本文深入解析了`align-content`和`justify-content`这两个关键属性，助你轻松驾驭网格容器内轨道的整体分布。`align-content`控制网格轨道在交叉轴上的对齐方式，而`justify-content`则负责主轴方向的对齐。通过具体示例，详细讲解了`start`、`end`、`center`、`stretch`、`space-between`、`space-around`、`space-evenly`等常用值的实际应用，并分享了在响应式布局、内容居中等场景下的使用技巧。理解主轴与交叉轴，灵活运用这两个属性，让你的Grid布局更加精美和专业！

align-content 控制网格轨道在交叉轴的对齐，justify-content 控制主轴方向的对齐，两者共同决定网格容器内轨道的整体分布方式。

在使用 CSS Grid 布局时，align-content 和 justify-content 是两个重要的对齐属性，用于控制网格容器中整个网格轨道（grid tracks）在交叉轴和主轴方向上的对齐方式。它们作用于网格容器（grid container），而不是单个网格项。

align-content：控制网格行在交叉轴上的对齐

该属性定义了网格轨道（行或列）在交叉轴（cross axis）上如何分布剩余空间。当网格容器在交叉轴方向上有额外空间时，align-content 决定这些轨道整体如何排列。

常见取值包括：

• start：轨道向交叉轴起点对齐
• end：轨道向交叉轴终点对齐
• center：轨道在交叉轴居中对齐
• stretch：轨道拉伸以填满容器（默认值）
• space-between：两端对齐，中间均匀分配空白
• space-around：每个轨道周围分配相等的空白
• space-evenly：所有间隙完全相等

示例：

.container {
  display: grid;
  grid-template-rows: 100px 100px;
  grid-template-columns: 1fr 1fr;
  align-content: center; /* 整个网格块在垂直方向居中 */
  height: 500px;
}

justify-content：控制网格列在主轴上的对齐

该属性控制网格轨道在主轴（main axis）方向上的对齐方式。当网格容器在主轴方向有额外空间时，justify-content 决定轨道整体如何分布。

常用值与 align-content 类似：

• start、end、center
• stretch（不常用于 justify-content）
• space-between、space-around、space-evenly

示例：

.container {
  display: grid;
  grid-template-columns: 100px 100px;
  justify-content: space-between; /* 两列之间平均分配空白 */
  width: 400px;
}

实际应用场景

这两个属性通常配合使用，实现网格内容的整体居中、边缘对齐或间距分布。比如：

• 在一个固定宽高的容器中，让网格内容区域整体居中显示
• 创建响应式布局时，调整多行/多列之间的间距
• 避免网格项被压缩或拉伸，保持视觉平衡

注意：align-content 和 justify-content 只在网格容器有多余空间且定义了明确尺寸（如固定高度/宽度）时才生效。如果容器尺寸刚好匹配内容，则看不出效果。

基本上就这些。理解主轴与交叉轴的关系，结合具体布局需求选择合适的对齐方式，能更灵活地控制 Grid 布局的整体外观。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~