Bootstrap怎么设置Flex项目在不同断点下的分布规则及排列对齐样式-Bootstrap教程-PHP中文网

加了 justify-content-md-center 没居中是因为父容器未启用对应断点的 flex 布局，需配合 d-md-flex 才生效；align-items- 始终作用于交叉轴，主轴为 vertical 时控制水平对齐；align-content- 仅在 flex-wrap 且多行时生效，用于分配行间空间。

bootstrap怎么设置flex项目在不同断点下的分布规则及排列对齐样式

为什么加了 `justify-content-md-center` 却没居中？

因为父容器没启用对应断点的 Flex 布局。Bootstrap 的 justify-content-* 类只控制主轴对齐，但前提是容器已声明 display: flex——这由 d-flex 或带断点的 d-sm-flex、d-md-flex 等类提供。只写 justify-content-md-center 而漏掉 d-md-flex，浏览器根本不会把该元素当 Flex 容器处理，类完全不生效。

验证方法：打开开发者工具，看 computed 样式里是否有 display: flex；没有，就说明 d-* 类缺失。

常见错误写法：justify-content-md-center flex-md-row → 缺少 d-md-flex，整个 Flex 行为失效。

正确组合示例：d-md-flex justify-content-md-center flex-md-row（md 及以上启用 Flex、水平居中、横向排列）。

`align-items-*` 在纵向布局下到底控制什么？

当主轴是垂直方向（即用了 flex-column），align-items-* 控制的是**水平对齐**，不是上下居中。很多人误以为 align-items-center 能让子项“垂直居中”，其实它始终作用于交叉轴：主轴 vertical → 交叉轴 horizontal → align-items-center = 所有子项水平居中。

想让纵向排列的子项在容器内上下居中？该用 justify-content-center（主轴对齐），不是 align-items-center。

关键区别：

justify-content-*：沿主轴分布（flex-row 时管左右，flex-column 时管上下）
align-items-*：沿交叉轴对齐（flex-row 时管上下，flex-column 时管左右）

响应式叠加时注意优先级：后写的类覆盖前一个，比如 align-items-start align-items-lg-center → lg+ 屏生效后者。

创意扇形排列卡片画廊

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

下载

如何实现“小屏堆叠、中屏两列、大屏三列且每行内容底部对齐”？

这不是单靠 Flex 对齐类就能搞定的事，得三层配合：容器启 Flex + 子项设宽度 + 高度约束保障对齐空间。

必须满足三个条件：

父容器加 d-flex flex-wrap（小屏换行）和断点类如 d-md-flex flex-md-nowrap（中屏起不换行）
子项用响应式宽度类，例如 col-12 col-md-6 col-lg-4，否则 flex-wrap 不会按预期折行
父容器需有明确高度（如 min-vh-100 或 h-100），否则 align-items-end 没有垂直空间可对齐

完整示例：<div class="d-flex flex-wrap min-vh-100"><div class="col-12 col-md-6 col-lg-4 align-self-end">…</div></div> —— 注意这里用 align-self-end 是为了让单个子项底部对齐（比全局 align-items-end 更灵活）。