Bootstrap的Flexbox实用类可快速构建布局，结合原生Flexbox属性能实现更精细控制，两者互补提升开发效率。
Bootstrap 和 CSS 的 Flexbox 并非互斥，而是可以很好地互补。Bootstrap 本身基于 Flexbox 构建其布局系统（从 v4 开始），但开发者也可以在使用 Bootstrap 的同时，灵活运用原生 Flexbox 属性来实现更精细的控制。
理解 Bootstrap 的 Flexbox 基础
Bootstrap 提供了一系列 实用类（utility classes） 来快速设置 Flexbox 布局，无需写自定义 CSS。这些类覆盖了容器和子元素的常见需求：
• 开启 Flex 容器：使用d-flex 将一个元素设为 flex 容器。• 主轴对齐：
justify-content-start、justify-content-center、justify-content-end、justify-content-between 等。• 交叉轴对齐：
align-items-start、align-items-center、align-items-stretch 等。• 单个子项对齐：
align-self-start、align-self-center 等。• 方向控制：
flex-row、flex-column 及其反向版本。
例如，用 Bootstrap 快速创建一个水平居中、垂直居中的卡片：
<div class="d-flex justify-content-center align-items-center" style="height: 100vh;"> <div class="card">内容居中</div> </div>
在 Bootstrap 中补充使用原生 Flexbox
当 Bootstrap 的实用类无法满足复杂布局时，可添加自定义 CSS 使用原生 Flexbox 属性进行增强：
立即学习“前端免费学习笔记（深入）”；
• 控制子项伸缩：Bootstrap 没有直接提供flex-grow、flex-shrink 的类。可通过自定义类实现，如 .flex-2 { flex: 2; } 让某个子项占据更多空间。• 响应式伸缩：结合 Bootstrap 断点，为不同屏幕设置
flex-direction。例如移动端用列布局，桌面端用行布局：
.custom-flex {
display: flex;
}
@media (max-width: 575.98px) {
.custom-flex {
flex-direction: column;
}
}
• 等高列：使用 d-flex 包裹多个 .col，子项自动等高，这比传统网格更直观。
避免冲突与最佳实践
混合使用时需注意结构清晰，避免类名冗余或覆盖：
• 优先使用 Bootstrap 类：能用justify-content-center 就不必写 justify-content: center 的 CSS。• 自定义类命名清晰
• 理解 DOM 结构：Bootstrap 网格本身是 flex 容器（.row），不要在外层重复设
d-flex 导致嵌套混乱。
基本上就这些。Bootstrap 的 Flexbox 实用类解决大部分常见布局，原生 Flexbox 补充细节控制，两者结合既高效又灵活。
