css Grid对齐属性align-content justify-content应用

align-content 和 justify-content 是 CSS Grid 布局中控制网格轨道整体对齐的核心属性，分别作用于交叉轴和主轴方向，需在容器有剩余空间时配合使用以实现灵活布局。

1. align-content

   作用方向：交叉轴（Cross Axis，垂直于主轴的方向）。

   功能：控制网格轨道（行或列）在交叉轴上的整体对齐方式，仅在容器有剩余空间时生效。

   常见取值：

   start：轨道向交叉轴起点对齐（如顶部对齐）。

   end：轨道向交叉轴终点对齐（如底部对齐）。

   center：轨道在交叉轴居中对齐。

   stretch（默认值）：轨道拉伸以填满容器剩余空间。

   space-between：两端对齐，中间空白均匀分布。

   space-around：每个轨道周围分配相等的空白。

   space-evenly：所有间隙（包括边缘）完全相等。

2. justify-content

   作用方向：主轴（Main Axis，默认水平方向，可通过 flex-direction 或 grid-auto-flow 修改）。

   功能：控制网格轨道在主轴上的整体对齐方式，同样需容器有剩余空间。

   常见取值：

   start/end/center：与 align-content 类似，分别对齐主轴起点、终点或居中。

   stretch：较少使用（通常由网格项的 align-self 或 justify-self 控制拉伸）。

   space-between/space-around/space-evenly：空白分布方式同 align-content。

1. 整体居中布局

   固定宽高的容器中，通过 align-content: center 和 justify-content: center 实现网格内容整体居中。

   示例：.container { display: grid; grid-template-columns: 1fr 1fr; height: 300px; align-content: center; /* 垂直居中 */ justify-content: center; /* 水平居中 */}

2. 均匀分布空白

   使用 space-between、space-around 或 space-evenly 调整多行/多列之间的间距，避免内容紧凑或拉伸。

   示例：.container { display: grid; grid-template-columns: 100px 100px 100px; width: 500px; justify-content: space-between; /* 列间空白均匀分布 */}

3. 响应式布局调整

   结合媒体查询，根据屏幕尺寸动态修改对齐方式，优化不同设备的显示效果。

   示例：.container { display: grid; grid-template-rows: repeat(3, 1fr); height: 100vh;}@media (max-width: 600px) { .container { align-content: flex-start; /* 小屏幕时顶部对齐 */ }}

1. 生效条件

   容器必须定义明确尺寸（如固定 height/width），且内容未填满容器（存在剩余空间）。

   若容器尺寸刚好匹配内容（如 grid-template-rows: 100px 100px 且容器高度为 200px），属性无效。

2. 与 align-items/justify-items 的区别

   align-content/justify-content 控制轨道整体的对齐，作用于容器。

   align-items/justify-items 控制单个网格项在其单元格内的对齐，作用于容器但影响子项。

3. 主轴与交叉轴的动态性

   主轴方向可通过 grid-auto-flow: column 改为垂直方向，此时 justify-content 控制垂直对齐，align-content 控制水平对齐。

效果：

• 网格分为 3 列 2 行，容器宽度为父元素的 80%，高度固定为 400px。
• 行与行之间、列与列之间的空白完全相等，内容区域整体居中且间距均衡。

通过合理组合 align-content 和 justify-content，可高效实现复杂的网格对齐需求，提升布局的灵活性与视觉平衡感。