Bootstrap怎么设置Flex项目在容器中自动换行后的内容对齐排列方式-Bootstrap教程-PHP中文网

align-content-*类无效是因为容器未启用多行布局——必须设置flex-wrap: wrap（bootstrap 5用flex-wrap，旧版用flex-wrap-wrap），且父容器需有d-flex和显式高度约束，否则无剩余交叉轴空间可分配。

bootstrap怎么设置flex项目在容器中自动换行后的内容对齐排列方式

为什么 align-content-* 类加了没反应

因为容器没启用多行布局——align-content-系列类只在 flex-wrap: wrap 生效，而 Bootstrap 默认是 flex-wrap: nowrap。光加 align-content-center 没用，必须先让容器能换行。

确认父容器有 d-flex（或 d-inline-flex），否则所有 Flex 类都不起作用
必须显式添加 flex-wrap（Bootstrap 5）或 flex-wrap-wrap（旧版），不能只靠子元素撑宽自动触发换行
align-content 控制的是“行与行之间”的分布，不是单个子项的位置；它对单行布局完全无效
如果子元素高度不一致，且你希望视觉上底部对齐，别依赖 align-content，改用 align-items-baseline 或 align-items-end 配合固定高度容器

怎么让换行后的多行内容在垂直方向居中分布

用 align-content-center，但得搭配 flex-wrap 和足够高的容器空间。它会让所有 Flex 行在交叉轴（通常是垂直方向）上整体居中，而不是每行内的子项居中。

创意扇形排列卡片画廊

基于“创意扇形排列卡片画廊”制作的前端特效源码，包含扇形卡片、旋转展开、层级聚焦、键盘切换，打开 index.html 即可直接查看效果，可替换标题、颜色和图形元素复用。下载包已经整理好特效舞台、样式变量、动画规则和必要脚本，适合用于学习当前效果的实现方式，也方便替换文字、颜色、图形或图片后直接复用。

下载

常见场景：卡片内多个 .badge 横向排列、空间不足时换行，想让几行标签在卡片高度内垂直居中
若容器高度固定（比如 min-height: 200px），align-content-center 才能体现效果；高度由内容撑开时，往往看不出变化
注意和 align-items-center 区分：align-items 管每行内部子项怎么对齐，align-content 管这些行本身怎么排布
响应式下建议配 flex-md-wrap + align-content-md-center，避免小屏下因未换行导致类失效

space-between 和 space-evenly 在多行时到底差在哪

两者都用于行间距分配，但边缘处理逻辑不同：align-content-between 把首尾行贴边、中间等距；align-content-evenly 则让首行前、行间、末行后全部等距——视觉更均衡，尤其适合三行及以上。

align-content-between：适用于强调顶部/底部锚点的布局，比如顶部工具栏+中部内容+底部操作区（但需确保这三块是同一 Flex 容器的直接子行）
align-content-evenly：Bootstrap 5.3+ 才支持，旧版本会忽略；若项目数为 2 行，between 和 evenly 效果一致
别误写成 align-content-space-between——正确类名是 align-content-between，中间无 space-
如果行高差异大（如混用 .btn 和 .text-sm），stretch 可能拉伸某行导致失真，慎用 align-content-stretch

父容器没高度，`align-content` 就等于没写

align-content 不是让内容变高，而是把已存在的多行，在父容器的**剩余交叉轴空间**里重新分配位置。如果父容器高度刚好被内容撑满（比如没设 min-height、h-100 或 vh-100），那就没有“剩余空间”可分配，所有 align-content- 类都会失效。