flex-basis 优先级高于 width，设为具体值时 width 失效；.col 默认 flex: 0 1 auto，基准宽由内容或 width 决定；响应式 flex-basis 需手动写 CSS 或用自定义属性。
flex-basis 比 width 优先级高，设了就绕过 width
Bootstrap 的 .col 类内部用的是 flex: 0 1 auto，其中 flex-basis: auto 表示按内容宽度或 width（若显式设置）来定初始尺寸。但一旦你手动加了 flex-basis（比如 flex-basis: 200px），width 就彻底失效——它不再参与主轴尺寸计算。
常见错误现象：width: 100% 加在 .col 上却没撑满，或者响应式 w-md-50 在 flex 容器里被忽略，往往就是 flex-basis 已由父类（如 .col-6）隐式设为 auto 或具体值，覆盖了 width。
- 想让子项严格按百分比占位？直接用
.col-4这类栅格类，别额外加width - 想自定义基准宽又保持弹性？用内联 style 写
style="flex-basis: 300px"，比width: 300px更可靠 - 要响应式基准宽？Bootstrap 5 不提供
flex-basis-md-*工具类，得自己写 CSS 或用min-width+flex: 0 1 calc(...)组合
flex: 0 1 auto 和 flex: 1 1 auto 的伸展行为差异
flex: 0 1 auto（.col 默认）表示：不放大（flex-grow: 0）、可缩小（flex-shrink: 1）、基准按内容或 width；而 flex: 1 1 auto 允许放大，意味着当容器有剩余空间时，该项会主动拉伸去填满。
使用场景举例：导航栏中多个按钮并排，希望它们等宽且随容器缩放——给每个按钮加 flex-grow-1 flex-shrink-1，再配合 min-width: 120px 防小屏挤压。
- 只想要“固定基准 + 可收缩”？用
flex-shrink-1（默认）+ 显式flex-basis - 需要“基准宽 + 剩余空间均分”？改用
flex-grow-1 flex-shrink-0，并确保其他兄弟项也同策略，否则空间分配会倾斜 -
flex-grow: 1在多列中可能引发意外换行：如果总flex-basis超过容器宽，flex-shrink会先介入压缩，而非直接 grow —— 计算顺序不是线性的
响应式 flex-basis 需手动干预，Bootstrap 不内置
Bootstrap 5 提供了 flex-sm-grow-1、flex-lg-shrink-0 等响应式弹性控制类，但没有 flex-basis-md-50 这类工具。这意味着你无法用纯 class 实现“中屏下基准宽 50%，大屏下变 33.33%”这种逻辑。
可行做法是结合 CSS 自定义属性或媒体查询：
- 用
style="--bs-flex-basis: 50%"+ 自定义 CSS 规则匹配@media (min-width: 768px) - 更轻量：在断点上切换不同
flex值，例如flex-md-0（即flex: 0 0 50%） +flex-lg-0（flex: 0 0 33.333%） - 注意：Bootstrap 的
flex-*-0是flex: 0 0 auto，不是flex-basis: 0，所以仍需配合 width 或自定义 flex-basis
align-items: stretch 拉伸高度时，flex-basis 不起作用
高度方向的 flex-basis（即交叉轴）只在 flex-direction: column 下才作为主轴基准；而在默认的 row 方向下，align-items: stretch（.col 默认行为）会让子项拉伸到 .row 的高度，此时 flex-basis 对高度无影响 —— 它管的是宽度。
如果你看到卡片高度不一致，别急着调 flex-basis，先确认：
-
.row是否有明确高度来源（如min-height: 300px或h-100） -
.col是否加了d-flex h-100，把拉伸链往下传 - 子项（如
.card）是否设了height或min-height，强行打断 stretch 行为
真正控制高度伸展基准的，是父容器的高度约束，不是子项的 flex-basis。这点容易和宽度方向混淆，是实际调试中最常卡住的地方。
