css align-content与justify-content在grid中的作用

align-content控制网格行在垂直方向的对齐,justify-content控制网格列在水平方向的对齐,二者分别处理容器内多余空间的分配,配合使用可实现灵活整齐的网格布局。

在 CSS Grid 布局中,align-contentjustify-content 都用于控制网格容器内网格轨道(grid tracks)在整体空间中的对齐方式,但它们作用的方向不同。

align-content:控制行轴方向的对齐(垂直方向

align-content 作用于网格行(row axis),也就是沿着块级方向(垂直方向)分配网格容器中多余的空间。它适用于当网格总高度小于容器高度时,决定这些行如何分布空间。

常见取值包括:

  • start:行向容器顶部对齐
  • end:行向容器底部对齐
  • center:行整体居中对齐
  • space-between:行之间等距分布,首行在顶部,末行在底部
  • space-around:每行周围分配相等空间
  • space-evenly:所有行之间的间距完全相等
注意:只有当网格行的总高度小于容器高度时,align-content 才会生效。

justify-content:控制列轴方向的对齐(水平方向)

justify-content 作用于网格列(column axis),即沿行内方向(水平方向)分配多余的空间。当网格总宽度小于容器宽度时,它决定列的整体对齐方式。

支持的值与 align-content 类似:

  • start:列向左对齐
  • end:列向右对齐
  • center:列整体水平居中
  • space-between:列之间均匀分布,首列靠左,末列靠右
  • space-around:每列周围有相等空间
  • space-evenly:所有列间距完全一致
同样,只有当网格列的总宽度小于容器宽度时,justify-content 才起作用。

基本上就这些。这两个属性共同管理网格整体在容器内的排布,一个管垂直方向,一个管水平方向,配合使用可以让布局更灵活、整齐。