如何通过Bootstrap Flexbox类快速调整CSS布局对齐？

本文共计1222个文字，预计阅读时间需要5分钟。

Bootstrap的Flex工具类并非随意使用，每个单词都蕴含着意义，理解了才能不查文档就写出正确的代码。

例如，`flex-row` 是主轴方向，`justify-content-center` 是主轴对齐，`align-items-start` 是交叉轴对齐——这三个维度必须清晰区分，否则调半天发现是方向搞错了。

常见错误现象：align-items-center加了但内容没垂直居中，大概率是因为父容器没设height或没设display: flex（Bootstrap 5默认用flex，但旧项目可能还在用flex-row这类需配合d-flex）。

• d-flex必须加在父容器上，否则子元素的justify-/align-类无效
• flex-column会把主轴变成垂直方向，此时justify-content-between就变成上下撑开，不是左右
• 响应式前缀如md-justify-content-end只在≥768px生效，小屏会回退到无前缀版本，别漏掉基础断点

为什么align-self类有时不起作用

因为align-self只对Flex子项生效，且会被父容器的align-items覆盖——除非显式设置align-self值。