Flexbox 布局（Flexbox Layout）是现代 Web 开发中非常重要的一种布局方式。它可以帮助我们实现多种排版效果，比如水平居中、垂直居中、自适应布局等。在本文中，我们将介绍 12 个例子，演示 Flexbox 布局的强大功能，同时也会讲解其中的一些技术细节，希望能对大家的前端开发工作有所帮助。
1. 水平居中
Flexbox 布局可以很轻松地实现水平居中。下面是一个例子：
<div class="container"> <div class="box"></div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------------- ------- - ---- - ------ ------ ------- ------ ----------------- ---- -
上面的代码中，我们使用了 display: flex 将 .container 设置为 Flex 容器，然后使用了 justify-content: center 将内部的 .box 元素水平居中。这个效果非常简单实用，可以让我们轻松实现各种水平居中的需求。
2. 垂直居中
除了水平居中，我们也可以使用 Flexbox 布局实现垂直居中：
<div class="container"> <div class="box"></div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ------------ ------- - ---- - ------ ------ ------- ------ ----------------- ---- -
上面的代码中，我们使用了 align-items: center 将内部的 .box 元素垂直居中。同样地，这个效果也非常简单实用，可以让我们轻松实现各种垂直居中的需求。
3. 水平垂直居中
我们还可以使用 Flexbox 布局同时实现水平和垂直居中：
<div class="container"> <div class="box"></div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------------- ------- ------------ ------- - ---- - ------ ------ ------- ------ ----------------- ---- -
上面的代码中，我们使用了 justify-content: center 和 align-items: center 将内部的 .box 元素水平和垂直居中。这个效果非常常用，可以让我们轻松实现各种居中的需求。
4. 自适应宽度
Flexbox 布局可以帮助我们实现自适应宽度的效果。下面是一个例子：
<div class="container"> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- - ---- - ----- -- ------- ------ ----------------- ---- -
上面的代码中，我们使用了 flex: 1 将内部的 .box 元素设置为自适应宽度，这样它们就可以平分父容器的宽度，并且自动适应不同的屏幕大小。这个效果非常实用，可以让我们轻松实现各种自适应宽度的需求。
5. 固定宽度排序
除了自适应宽度，我们也可以使用 Flexbox 布局实现固定宽度排序：
<div class="container"> <div class="box" style="width: 100px;"></div> <div class="box" style="width: 150px;"></div> <div class="box" style="width: 200px;"></div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- - ---- - ------- ------ ----------------- ---- - ----------------- - ------ -- - ----------------- - ------ -- - ----------------- - ------ -- -
上面的代码中，我们使用了 order 属性将内部的 .box 元素按照指定的顺序进行排序。这个效果非常实用，可以让我们轻松实现各种固定宽度排序的需求。
6. 不等宽排列
除了固定宽度排序，我们也可以使用 Flexbox 布局实现不等宽排列：
<div class="container"> <div class="box" style="width: 100px;"></div> <div class="box" style="width: 150px;"></div> <div class="box" style="width: 200px;"></div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- - ---- - ------- ------ ----------------- ---- ------- - ----- -
上面的代码中，我们将内部的 .box 元素设置为等宽并且使用 margin 属性设置它们之间的间隔，这样它们就可以不等宽排列了。这个效果稍微有点复杂，但是也非常实用，可以让我们轻松实现各种不等宽排列的需求。
7. 弹性填充
弹性填充是 Flexbox 布局中非常实用的一种技巧。下面是一个例子：
<div class="container"> <div class="box" style="width: 100px;"></div> <div class="box" style="width: 150px;"></div> <div class="box" style="flex: 1;"></div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- - ---- - ------- ------ ----------------- ---- ------- - ----- -
上面的代码中，我们将内部的 .box 元素设置为 flex: 1，这样它们就可以自动填充父容器的剩余空间。如果我们想要实现固定宽度和自适应宽度混合的效果，就可以使用这个技巧来处理。
8. 换行排列
Flexbox 布局还支持换行排列。下面是一个例子：
<div class="container"> <div class="box" style="width: 100px;"></div> <div class="box" style="width: 150px;"></div> <div class="box" style="width: 200px;"></div> <div class="box" style="width: 250px;"></div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------- ----- - ---- - ------- ------ ----------------- ---- ------- - ----- -
上面的代码中，我们使用了 flex-wrap: wrap 将内部的 .box 元素进行换行排列。这个效果非常实用，可以让我们轻松实现各种换行排列的需求。
9. 设定对齐方式
Flexbox 布局还支持设置对齐方式。下面是一个例子：
<div class="container"> <div class="box" style="width: 100px;"></div> <div class="box" style="width: 150px;"></div> <div class="box" style="width: 200px;"></div> <div class="box" style="width: 250px;"></div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ------------ ----------- - ---- - ------- ------ ----------------- ---- ------- - ----- -
上面的代码中，我们使用了 align-items: flex-start 将内部的 .box 元素对齐到 Flexbox 容器的顶部。Flexbox 布局支持多种对齐方式，我们可以根据需求进行设定。
10. 设定自由空间大小
Flexbox 布局还支持设定自由空间大小。下面是一个例子：
<div class="container"> <div class="box" style="width: 100px;"></div> <div class="box" style="width: 150px;"></div> <div class="box" style="flex: 1;"></div> <div class="box" style="width: 250px;"></div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------------- -------------- - ---- - ------- ------ ----------------- ---- ------- - ----- -
上面的代码中，我们使用了 justify-content: space-between 将内部的 .box 元素平均分配到 Flexbox 容器的两侧，并且将中间的 .box 设定为自由空间，让它自动适应剩余的空间大小。这个效果非常实用，可以用于实现各种自由空间大小的需求。
11. 相对位置布局
Flexbox 布局还可以使用绝对定位和相对定位来实现相对位置布局。下面是一个例子：
<div class="container"> <div class="box" style="position: relative; left: 50px;"></div> <div class="box"></div> <div class="box"></div> </div>
-- -------------------- ---- ------- ---------- - --------- --------- - ---- - --------- --------- ------- ------ ----------------- ---- ------- - ----- -
上面的代码中，我们在 .container 容器内使用绝对定位来设置内部的 .box 元素的相对位置。这个效果非常实用，可以用于实现各种相对位置布局的需求。
12. 多重布局
最后一个例子是多重布局。Flexbox 布局还可以嵌套使用，创建出更加复杂的布局结构。下面是一个例子：
-- -------------------- ---- -------
---- ------------------
---- ----------- ------------- --------------
---- ------------
---- ----------------- -------------- -------------
---- ----------------- -------------- --------------
------
---- ------------
---- ----------------- -------------- --------------
---- ----------------- -------------- --------------
------
-------- -------------------- ---- ------- ---------- - -------- ----- - ---- - ----- -- -------- ----- --------------- ------- ---------------- -------------- - ---------- - ----------------- ---- ------- ---- -
上面的代码中，我们在 .container 容器内，将 .box 元素设置为 Flexbox 容器，并且进行了多重嵌套。这个效果非常实用，可以用于实现各种复杂的布局结构。
总结
本文介绍了 12 个使用 Flexbox 布局实现的例子，演示了这一神器的强大功能。Flexbox 布局具有非常实用的功能，可以让我们轻松实现各种排版效果。同时，我们也讲解了一些技术细节，希望能对大家的前端开发工作有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a66d4148841e9894309924