Bootstrap Flex工具类命名遵循主轴/交叉轴、响应式前缀、作用层级三原则：d-flex必加父容器，flex-row/column定主轴方向，justify-/align-类分控两轴对齐，align-self受父align-items约束，响应式类需配合对应d-*类生效。
Flexbox工具类命名规则怎么看懂
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值。比如父级写了align-items-stretch，某个子项加了align-self-center，它才会真正居中；如果父级是align-items-baseline，那align-self-center照样被压制。
使用场景：卡片列表里某张卡片的标题需要单独上对齐，其他保持默认拉伸，这时就在那个<h3></h3>上加align-self-start，而不是去动整个.row。
立即学习“前端免费学习笔记（深入）”；
- 有效值只有
start、end、center、baseline、stretch，没有middle或vertical-center - IE10/11对
align-self支持不稳定，若需兼容，优先用margin-auto替代 - 和
mt-auto/mb-auto混用时注意：后者是外边距推挤，前者是Flex轴对齐，逻辑不同，别指望align-self-center mt-auto叠加强度
flex-grow和flex-shrink类怎么配比才不打架
Bootstrap把flex-grow封装成flex-grow-0到flex-grow-1，但flex-grow-1实际对应的是flex: 1 1 0（即grow=1, shrink=1, basis=0），不是单纯“占满剩余空间”。如果两个同级元素都设flex-grow-1，它们等分；但如果一个设flex-grow-1，另一个设flex-grow-0，后者宽度只由内容决定，前者吃掉所有剩余空间。
容易踩的坑：在表单行里给输入框加flex-grow-1，按钮却用了flex-shrink-0，结果小屏下按钮被压缩变形——因为flex-shrink-0阻止收缩，但父容器没设flex-nowrap，按钮文字换行后撑高了整行。
-
flex-grow-1+flex-shrink-0组合适合固定宽按钮+弹性输入框，但务必加flex-nowrap防换行 -
flex-basis没直接工具类，想设具体宽度得用w-25或flex-basis-xx（需自定义CSS） - Bootstrap 5.3+新增
flex-fill，等价于flex: 1 1 auto，比flex-grow-1更贴近“填满”直觉，但老版本不支持
响应式对齐在移动端突然失效怎么办
最常被忽略的一点：Bootstrap的响应式Flex类（如sm-justify-content-between）**只控制对齐方式，不控制是否启用Flex布局**。如果父容器只在大屏加了d-flex，小屏没了d-flex，那sm-justify-content-between根本不会生效——因为非Flex容器里这些类毫无意义。
性能影响很小，但调试成本高。建议统一用d-flex d-sm-flex开头，再叠加对齐类，避免断点跳跃导致布局塌陷。
- 错误写法：
flex-sm-row justify-content-sm-between（缺d-flex） - 正确写法：
d-flex flex-sm-row justify-content-sm-between - 小屏竖排+主轴居中？写
d-flex flex-sm-column justify-content-sm-center，别漏d-flex
复杂点在于，当嵌套多层Flex容器时，每一层的d-*类都要独立判断是否启用，不能靠父层继承。这点容易被忽略，一调就是半小时找哪层断了。
