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;
}
.item {
@apply flex-1 min-w-[200px]; / 防止过窄导致换行异常 /
}
另外注意：flex-1 等价于 flex: 1 1 0%，它依赖父容器有明确主轴尺寸（如 width 或 max-width），否则收缩行为不可预测。
系统介绍：YIXUNCMS中专专版是易迅软件工作室在中秋节来临之即推出的专题模板建站系统，使用增强版后台管控系统，板板设计符合节日特点。易迅软件工作室恭祝全国人民中秋快乐。特别提示：由于网站页面的不同设计，部分后台功能未在前端进行体现。系统特点：1、采用目前流行的PHP语言编写，底层采用超轻量级框架作为系统支撑；2、页面布局使用DIV+CSS技术，遵循WEB标准，及大提高页面的浏览速度；3、使用应
立即学习“前端免费学习笔记（深入）”；
用 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 后被忽略——这些细节框架类名从不提醒你。
