在 Web 前端开发中，布局一直是一个麻烦的事情，尤其是对于 HTML 的块级元素，要想实现以上下左右居中这类复杂的布局，显得尤其棘手。不过，我们也不必感到沮丧，现在已经有一个完美的解决方案了——Flexbox 布局！
Flexbox 是一种强大的布局方式，它让我们可以非常容易地实现各种复杂的布局，而且它比传统的布局方案更加灵活、简洁。接下来，我们将详细介绍 Flexbox 布局的基本原理、语法和示例代码，让大家能够更好地掌握这个强大的布局技术。
Flexbox 布局的基本原理
Flexbox 布局是一种基于弹性盒装模型的布局方式，它的布局过程是将容器分成了一系列的“弹性盒子”，然后通过对这些弹性盒子排列、排序、分配空间的方法来实现布局。
Flexbox 布局的基本概念如下图所示：
在上面的示意图中，我们可以看到 Flexbox 布局有三个基本概念：
容器（Container）：要进行 Flex 布局的容器。需要在容器上设置 display:flex 属性来表明该容器使用了 Flexbox 布局。
弹性盒子（Flex Item）：容器内的子元素。需要在子元素上设置 flex 属性来控制子元素在弹性盒模型中对宽度的占比。
主轴（Main Axis）：弹性盒模型中项目的排列方向。可以采用 row 或 column。
在 Flexbox 布局中，通过设置上述的属性参数，就可以实现各种组合方式的布局了。
Flexbox 布局的语法
下面，我们来看一下 Flexbox 布局的具体语法。
容器属性
容器属性的定义和示例代码如下：
.container {
display: flex; /* 将 flex 容器设置为 block 级元素 */
flex-direction: row; /* 将 flex 容器中的子元素横向排列 */
justify-content: space-between; /* 沿着 row 方向分配剩余空间 */
align-items: center; /* 垂直方向上，将 flex 容器中的子元素都居中展示 */
flex-wrap: nowrap; /* flex 子元素超出容器宽度时，缩小子元素而不是换行 */
align-content: center; /* 子元素或行在垂直方向上对齐，纵轴居中 */
}display: flex;：设置容器为 flex 布局。flex-direction: row;：设置容器中弹性盒子排列的方向为横向。justify-content: space-between;：将子元素沿着横向方向分配剩余空间，从容器的最左侧到最右侧均匀分配。align-items: center;：将子元素在纵向方向上都居中显示。flex-wrap: nowrap;：默认情况下，当子元素的宽度超过容器宽度时，它们将自动换行。若设置为 nowrap，则不会换行而是按照比例缩小子元素。align-content: center;：当弹性盒子有多行时，沿着垂直方向上对齐。在本例中设置为居中对齐。
弹性盒子属性
接下来，我们来看一下弹性盒子的属性。
-- -------------------- ---- ------- ------------ - ----- -- -- ------------------ -- - ------------ - ----- -- -- ----------------- -- - ------------ - ----- - ----- -- ------------------------- -- -
flex: 1;：将剩余空间均分。flex: 2;：将剩余空间分为 1:2 比例。flex: 3 30px;：将剩余空间分为 1:3 比例，最小宽度为 30px。
Flexbox 布局的示例代码
最后，我们来看一下 Flexbox 布局的实例代码，展现它的强大之处。
下面的 HTML 代码实现了一个 Flexbox 布局的例子，基本思路是包裹几个图片并让它们都居中放置，图片大小、颜色等都可以修改。
<div class="container"> <img src="https://cdn.jsdelivr.net/gh/Tit1an/img-repo/article/flexbox-1.jpg" alt=""> <img src="https://cdn.jsdelivr.net/gh/Tit1an/img-repo/article/flexbox-2.jpg" alt=""> <img src="https://cdn.jsdelivr.net/gh/Tit1an/img-repo/article/flexbox-3.jpg" alt=""> <img src="https://cdn.jsdelivr.net/gh/Tit1an/img-repo/article/flexbox-4.jpg" alt=""> <img src="https://cdn.jsdelivr.net/gh/Tit1an/img-repo/article/flexbox-5.jpg" alt=""> </div>
下面的 CSS 代码将例子中的一些弹性盒子属性应用了进去，显示对应 rank 号的图片，使其为横向自适应的。
-- -------------------- ---- ------- ---------- - -------- ----- --------------- ---- ---------------- -------------- ------------ ------- ---------- ------- -------------- ------- - ---------- --- - ----- -- - ---------- ---------------- - ------- ------ ----------- -------- - ---------- ---------------- - ------- ------ ----------- -------- - ---------- ---------------- - ------- ------ ----------- -------- - ---------- ---------------- - ------- ------ ----------- -------- - ---------- ---------------- - ------- ------ ----------- -------- -
由上面的示例代码可以看出，Flexbox 布局可以轻松实现多种组合方式的布局，并且不需要过多的代码。它不仅让布局变得简单易懂，而且可以适用于不同的浏览器和终端设备，这让 Flexbox 布局在前端开发中得到了广泛的应用。
结论
在本篇文章中，我们详细讲解了 Flexbox 布局的基本概念、属性语法和使用示例，希望可以让大家更好地掌握这个强大的布局技术。在实际的 Web 前端开发中，灵活、简洁的 Flexbox 布局将帮助我们更好地完成各种复杂的布局任务。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67216cb62e7021665e075f04