当前位置：首页 > 文章列表 > 文章 > 前端 > CSSGridalign-content与justify-content使用技巧

CSSGridalign-content与justify-content使用技巧

2025-10-01 10:38:29 0浏览收藏

**CSS Grid 布局：`align-content` 和 `justify-content` 精准定位网格** 在 CSS Grid 布局中，`align-content` 和 `justify-content` 是控制网格轨道对齐的关键属性。`align-content` 负责网格在垂直方向的对齐，控制网格整体在容器垂直空间中的位置；而 `justify-content` 则控制水平方向的对齐，调整网格在容器水平空间中的分布。二者配合使用，可以实现网格在容器内的精确定位，例如居中对齐、两端对齐或均匀分布。本文将深入解析这两个属性的用法、常用值（如 `center`、`start`、`end` 等）以及实际应用场景，助你轻松掌握 CSS Grid 布局中网格的整体定位技巧，提升页面布局的灵活性和美观度。掌握这两个属性，让你的网格布局更具掌控力！

align-content 控制网格在垂直方向的对齐，justify-content 控制水平方向，二者结合可精确定位整个网格在容器中的位置，适用于多轨道且容器有剩余空间时，通过设置如 center、start、end 等值实现居中或分布效果，常用于整体布局调整。

css grid align-content和justify-content结合使用

在 CSS Grid 布局中，align-content 和 justify-content 用于控制网格容器内整个网格轨道（grid tracks）在交叉轴和主轴方向上的对齐方式。当它们结合使用时，可以精确地控制网格整体在容器中的位置。

align-content 控制垂直方向对齐

该属性作用于块轴（block axis），也就是垂直方向（从上到下），用于在网格容器有额外空间时，分配这些空间给网格轨道整体。

常见值包括：

start：网格靠上对齐
end：网格靠下对齐
center：网格垂直居中
space-between：两端对齐，中间间距相等
space-around：每个轨道周围有相等空间
space-evenly：所有间隙完全均分

justify-content 控制水平方向对齐

该属性作用于内联轴（inline axis），即水平方向（从左到右），处理网格轨道在容器内的水平分布。

常用值与 align-content 类似：

start：网格靠左
end：网格靠右
center：网格水平居中
space-between、space-around、space-evenly：类似地用于水平分布

结合使用的实际场景

假设你有一个固定高度和宽度的 grid 容器，但内部的网格总尺寸小于容器，你可以同时使用这两个属性来居中或分布整个网格。

示例代码：

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

这个例子中，一个 200px 宽、160px 高的网格会在 400×300 的容器中居中显示。