css align-content与justify-content在grid中的作用
最新回答
苏仙小可爱
2021-03-06 17:26:40
在 CSS Grid 布局中，align-content 和 justify-content 分别用于控制网格容器内网格轨道（行和列）在垂直方向和水平方向的对齐方式，二者共同管理网格整体在容器内的排布，实现灵活整齐的布局效果。
1. align-content：控制行轴方向（垂直方向）的对齐- 作用方向：沿块级方向（垂直方向）分配网格容器中多余的空间，适用于网格行（row axis）。
- 生效条件：仅当网格行的总高度小于容器高度时生效（即存在垂直方向的多余空间）。
- 常见取值：
start：行向容器顶部对齐。
end：行向容器底部对齐。
center：行整体居中对齐。
space-between：行之间等距分布，首行在顶部，末行在底部。
space-around：每行周围分配相等空间（行间距为两侧空间的一半）。
space-evenly：所有行之间的间距完全相等（包括行与容器边缘的间距）。
示例：
.container { display: grid; grid-template-rows: repeat(3, 100px); /* 总高度300px */ height: 500px; /* 容器高度大于网格总高度 */ align-content: center; /* 行整体居中对齐 */}2. justify-content：控制列轴方向（水平方向）的对齐- 作用方向：沿行内方向（水平方向）分配多余的空间，适用于网格列（column axis）。
- 生效条件：仅当网格列的总宽度小于容器宽度时生效（即存在水平方向的多余空间）。
- 常见取值：
start：列向左对齐。
end：列向右对齐。
center：列整体水平居中。
space-between：列之间均匀分布，首列靠左，末列靠右。
space-around：每列周围分配相等空间（列间距为两侧空间的一半）。
space-evenly：所有列间距完全一致（包括列与容器边缘的间距）。
示例：
.container { display: grid; grid-template-columns: repeat(3, 100px); /* 总宽度300px */ width: 500px; /* 容器宽度大于网格总宽度 */ justify-content: center; /* 列整体水平居中 */}3. 二者配合使用- align-content 和 justify-content 分别处理垂直和水平方向的多余空间分配，通过组合使用可实现更灵活的布局。
- 典型场景：
当网格总高度小于容器高度且总宽度小于容器宽度时，二者同时生效。
例如：align-content: space-between; justify-content: space-around; 可使行和列均匀分布，且间距一致。
示例：
.container { display: grid; grid-template-rows: repeat(2, 100px); /* 总高度200px */ grid-template-columns: repeat(2, 100px); /* 总宽度200px */ height: 400px; width: 400px; align-content: space-evenly; /* 行间距完全相等 */ justify-content: space-evenly; /* 列间距完全相等 */}4. 注意事项- 生效前提：二者均需在网格总尺寸小于容器尺寸时才会生效，否则无效果。
- 与 align-items/justify-items 的区别：
align-content/justify-content 控制网格轨道（行/列）的整体对齐。
align-items/justify-items 控制网格项（grid items）在单元格内的对齐。
- align-content：垂直方向对齐行，适用于多余垂直空间。
- justify-content：水平方向对齐列，适用于多余水平空间。
- 配合使用：可实现网格在容器内的灵活、整齐排布。
热门标签
