什么是 Flexbox 布局？
Flexbox 是一种弹性盒模型布局，它可以帮助我们更方便、更高效地对元素进行布局和对齐。通常情况下，我们使用传统布局方式时需要通过 float、position 等属性来进行控制，而在使用 Flexbox 布局时，我们只需要设置一些容器级别的属性，就可以轻松地实现我们需要的布局效果。
Flexbox 布局的优势
相对于传统的布局方式，Flexbox 有以下优势：
- 简单易用：只要简单设置容器级别的属性即可实现复杂的布局效果，无需花费过多时间和精力维护；
- 灵活性强：Flexbox 适用于各种布局场景，如水平居中、垂直居中、等高布局等；
- 适应性强：Flexbox 布局追求弹性，可以根据不同容器宽度的变化自动调整子元素的布局；
- 可读性好：通过控制容器属性的方式实现布局，代码易于读懂和维护。
Flexbox 布局案例分享
实现水平居中
在传统的布局方式中，实现水平居中通常需要设置父元素的宽度、将子元素设置成 inline-block，并设置 text-align。而在 Flexbox 布局中，我们只需要将父元素（即容器）的 display 属性设置为 flex，并将其子元素的水平对齐方式设置为 center 即可。
<div class="container"> <div class="box"></div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------------- ------- - ---- - ------ ------ ------- ------ -
实现垂直居中
实现垂直居中也是传统布局中的难点，我们通常需要在父元素中设置 position: relative，子元素设置 position: absolute，并通过 top 和 translate 来实现垂直居中。而在 Flexbox 布局中，我们只需要设置容器的 align-items 属性为 center 即可。
<div class="container"> <div class="box"></div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------------- ------- ------------ ------- - ---- - ------ ------ ------- ------ -
实现等高布局
在传统的布局方式中，实现等高布局需要借助 JavaScript 来获取元素最大高度，然后对所有元素进行高度的统一设置。而在 Flexbox 布局中，我们只需要将容器属性 align-items 设置为 stretch，即可使所有子元素自动排列成等高布局。
<div class="container"> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div>
.container {
display: flex;
align-items: stretch;
}
.box {
width: 100px;
}总结
Flexbox 布局是一种比较新颖、实用的布局方式，它能够以较少的代码实现许多传统布局方式难以完成的效果。通过本文所提供的示例，相信您已经初步了解了 Flexbox 的基本用法，可以在您的前端开发场景中尝试使用。但需要注意的是，Flexbox 布局并不是万能的，有时候我们可能仍然需要传统的布局方式来进行布局。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a90d0a48841e989455cb36