可行路径是绕过框架手写或按需编译：Tailwind 可通过 corePlugins 禁用 flex 相关插件并保留 grid；Bootstrap 5 则需手动导入 functions/variables/mixins/grid 模块，跳过 utilities 中的 flex 子模块。
只引入 CSS Grid 而不加载 Flexbox 的可行路径
纯 CSS 框架（如 Bootstrap、Tailwind）默认打包整套布局工具，但如果你项目里只用 display: grid，硬塞一堆 flex、justify-content 相关类确实浪费。不过得先说清楚：**原生 CSS 没有“模块化引入”机制，所谓“只加载 Grid 部分”，本质是绕过框架、手写或按需编译**。
常见错误是直接删 node_modules/bootstrap/scss/_utilities.scss 里的 flex 相关 @import——这会破坏依赖顺序，导致 grid 类编译失败（因为某些 grid 工具类内部依赖 flex 的断点 mixin）。
- 真正安全的做法是：用框架的配置开关（如 Tailwind 的
corePlugins）禁用 flex 相关功能 - Bootstrap 5+ 不支持单独关 flex，但可改用
bootstrap/scss/functions+bootstrap/scss/grid手动构建最小集，跳过bootstrap/scss/utilities/_flex.scss - 注意：禁用 flex 后，
col类仍可用（它基于 grid），但col-6这类响应式栅格在旧版 Bootstrap 中实际靠 flex 实现，需确认版本
Tailwind 中关闭 Flex 并保留 Grid 的配置写法
Tailwind 是目前唯一能干净做到这点的主流框架，靠 corePlugins 控制原子类生成。关掉 flex 不影响 grid-cols-2、place-items-center 等 grid 功能，但所有 flex、items-start、gap-x-4（旧版）都会消失。
关键配置在 tailwind.config.js：
立即学习“前端免费学习笔记（深入）”；
module.exports = {
corePlugins: {
preflight: true,
container: true,
// 关键：显式禁用 flex 相关插件
flex: false,
flexDirection: false,
flexGrow: false,
flexShrink: false,
flexWrap: false,
placeContent: false,
placeItems: false,
// 注意：grid 相关插件默认开启，不用额外写 true
}
}
容易踩的坑：gap 类在 Tailwind v3+ 默认由 gap 插件控制（非 flex 插件），但旧项目若用 v2，gap-x/gap-y 属于 flex 插件，关 flex 就没了——得升级或手动补 gap 工具类。
Bootstrap 5 手动精简 Grid 的实际操作步骤
Bootstrap 官方不提供按需加载 UI 组件的 CLI，但 SCSS 源码结构清晰，可以安全裁剪。目标是只保留 grid 栅格系统（.row, .col, 响应式断点类），去掉所有 flex 布局类和 utility。
- 新建自定义入口 SCSS 文件（如
custom-grid.scss），只@import必需模块：functions,variables,mixins,grid - 绝对不要
@import "utilities"或其中的flex、spacing子模块——否则会把flex-row、ms-auto全带进来 - 注意
grid模块依赖breakpoints和containers，但不依赖reboot或type，可省略 - 编译后体积通常压到 8–12KB（gzip 后 ~3KB），比完整 Bootstrap（~200KB）小两个数量级
为什么不能用 @layer 或 !important “覆盖掉” Flex 类
有人试过在 CSS 末尾写 .d-flex { display: contents !important; } 来“中和” flex 类——这看似省事，实则埋雷。
问题在于：display: contents 会让元素失去盒模型，子元素直接冒泡到父容器，破坏所有依赖 flex 布局的第三方组件（比如某个弹窗库的 .modal-header 用了 d-flex）；更糟的是，!important 会污染整个样式作用域，后续调试时看到 display: flex 却不起作用，根本没法快速定位。
真正可控的方式只有两种：
— 从源码编译阶段剔除（推荐）
— 或用 PostCSS 插件（如 postcss-discard）在构建后删除含 flex 的规则行（需正则精准匹配，避免误删 inline-flex 或 grid 中的 flex 字符串）
最常被忽略的一点：即使你没写任何 flex 相关 HTML class，某些框架组件（如 React 的 Modal、Vue 的 ElDialog）内部默认用 flex 布局，禁用后可能直接错位。上线前务必跑一遍 UI 回归测试。
