什么是 Flexbox？
Flexbox 是指弹性盒子布局，它是一种新的 CSS 布局方式，用于设计复杂的页面布局和元素定位。Flexbox 旨在让容器更具灵活性和自适应性，并为元素提供了更多的布局和对齐控制。
Bootstrap 是什么？
Bootstrap 是一个快速开发 Web 应用程序的前端框架，由 Twitter 开发，并以开源项目的形式公布，具有易学易用、响应式布局、浏览器兼容、移动设备优化等特点。Bootstrap 提供预定义的 HTML 元素和 CSS 样式，并具有灵活的扩展性和自定义化。Bootstrap 还包括常用的 JavaScript 组件，如模态框、轮播图、下拉菜单等。
Bootstrap 如何应用 Flexbox？
Bootstrap 从 4.x 版本开始，采用 Flexbox 作为默认的布局方式，相比之前的版本，Bootstrap 4.x 得到了更好的灵活性和响应性。在 Bootstrap 中，Flexbox 主要用于以下两个方面：
1. 网格系统（Grid System）
Bootstrap 的网格系统是指将页面分为若干等宽的列，并使用 Flexbox 实现灵活和自适应的布局方式。在 Bootstrap 中，网格系统由 .row 和 .col-* 组成，其中 .row 代表行，.col-* 代表列，星号代表列宽，可取 1~12 之间的整数。
示例代码：
<!-- 简单的网格布局 --> <div class="row"> <div class="col-3">三等分</div> <div class="col-6">占一半</div> <div class="col-3">三等分</div> </div>
2. 弹性盒子（Flexbox）
在 Bootstrap 中，还可以独立使用 Flexbox 布局，具体方法是在父元素中添加 .d-flex 类，并结合其他 Flexbox 属性来控制子元素的排列、间距、对齐等。
示例代码：
<!-- Flexbox 布局 --> <div class="d-flex justify-content-between align-items-center"> <div>左对齐</div> <div>居中对齐</div> <div>右对齐</div> </div>
上面的示例代码中，.d-flex 是设置父元素为 Flexbox 布局，.justify-content-between 是设置子元素 flex-start、center 和 flex-end 之间的排列方式，.align-items-center 是设置子元素在交叉轴方向（垂直方向）上的对齐方式。
总结
通过以上的介绍，我们可以看到 Bootstrap 与 Flexbox 的紧密结合，使得页面布局更加灵活和自适应，同时代码的实现也更加简洁和可读性强。我们需要掌握 Flexbox 的基本概念和属性，同时也需要熟悉 Bootstrap 的网格系统和弹性盒子布局，才能将它们灵活运用在实际项目中。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65b5a3ceadd4f0e0ffe64d43