Flexbox是原生CSS布局模块，框架仅封装其属性；直接使用display: flex更轻量可控，但需理解flex-wrap、flex-basis等关键行为，否则易因父容器约束或子元素尺寸策略导致布局异常。
Flexbox 本身不是 CSS 框架，而是原生 CSS 布局模块；主流框架（如 Bootstrap、Tailwind、Bulma）只是封装了它的属性，用类名暴露控制权。直接写 display: flex 更轻量、更可控，框架只是帮你少敲几个字——但代价是可能掩盖对 flex-wrap、flex-basis 等关键行为的理解偏差。
Bootstrap 5 的 flex 工具类怎么对应原生属性
Bootstrap 不提供完整 Flexbox 映射，只覆盖常用组合。比如：
-
d-flex→display: flex，但不会自动设flex-direction，需额外加flex-row或flex-column -
justify-content-center对应justify-content: center，但在 flex 容器未设width或父容器未约束时，可能视觉无变化 -
align-items-stretch是默认值，多数时候不生效；真要垂直居中子元素，得确认子元素没设height或margin干扰 - 响应式前缀如
flex-md-row表示「在md及以上断点才生效」，断点值由$grid-breakpointsSass 变量决定，非固定像素
Tailwind 的 flex 类为什么有时不生效
Tailwind 默认禁用 flex-wrap，所有 flex 容器默认 flex-wrap: nowrap。这意味着：当子元素总宽度超容器时，它们会溢出而非换行——必须显式加 flex-wrap 或 flex-wrap-reverse。
.container {
@apply flex flex-wrap gap-4;
}
<p>.item {
@apply flex-1 min-w-[200px]; /<em> 防止过窄导致换行异常 </em>/
}另外注意：flex-1 等价于 flex: 1 1 0%，它依赖父容器有明确主轴尺寸（如 width 或 max-width），否则收缩行为不可预测。
立即学习“前端免费学习笔记（深入）”；
用 Flexbox 做响应式栅格时，flex-basis 和 min-width 怎么选
响应式栅格的核心矛盾是：既要等分列宽，又要防止小屏下单列过窄。纯靠 flex: 1 在小屏下会把列压成一条细线；此时必须干预基础宽度。
- 用
flex-basis（如flex-[0_0_300px]）可设「理想基准宽」，但 Tailwind 默认不生成该类，需自定义或用min-w-替代 -
min-w-64（即min-width: 16rem）更直观，配合flex-wrap能自然触发换行，且浏览器兼容性更好 - Bootstrap 的
col-md-6实际是通过flex: 0 0 50%+max-width: 50%实现，本质仍是flex-basis控制，但它隐藏了百分比计算依赖父容器宽度这一前提
真正卡住人的往往不是类名记不住，而是没意识到 Flexbox 的行为高度依赖父容器约束和子元素自身尺寸策略。比如 align-items: center 在子元素含 margin-top 时会失效，或者 flex-grow 在子元素设了 width 后被忽略——这些细节框架类名从不提醒你。
