align-content用于多行flex或grid布局中控制行在交叉轴的整体对齐,常见取值有flex-start、center、space-between等,仅在换行时生效;单行对齐由align-items控制。
align-content 是 CSS 中用于控制多行 flex 容器内 Flex 项目在交叉轴上整体对齐方式的属性。它只在容器内的项目换行(即有多根轴线)时生效,且仅
适用于 Flex 布局和 Grid 布局中的多行情况。
当使用 flex-wrap: wrap 或 flex-wrap: wrap-reverse 允许项目换行时,可能会出现多行 flex 轴线。此时,align-content 决定这些轴线在交叉轴上的分布方式。
常见取值包括:
align-items 控制的是单行中各个项目在交叉轴上的对齐方式,而 align-content 控制的是多行之间的整体分布。
如果只有一行 flex 项目,align-content 不会起作用,此时应使用 align-items 来调整对齐。
在 CSS Grid 中,align-content 用于控制网格轨道在网格容器交叉轴上的对齐方式,比如多行轨道未占满容器高度时的分布。
基本上就这些。关键是记住:有多行才用 align-content,单行靠 align-items。不复杂但容易忽略两者的使用前提。