CSS Flexbox 布局有着强大的自适应能力，它可以使得网页布局更加灵活、优雅。在本篇文章中，我们将讲解如何使用 CSS Flexbox 实现左右固定宽度和中间自适应的三列布局。
布局分析
在这个布局中，我们需要实现三列分别为定宽、自适应和定宽的布局。如下图所示：
其中，左右两列宽度固定，中间列自适应宽度，需要占据剩余的宽度。
实现步骤
首先，我们需要先创建 HTML 结构，包含三个 div 标签，如下所示：
<div class="container"> <div class="left"></div> <div class="center"></div> <div class="right"></div> </div>
然后，我们需要为父容器 .container 设置 display: flex，使其变成 Flexbox 布局。
.container {
display: flex;
}接着，我们需要设置左右两列的固定宽度，中间列的自适应宽度和排列顺序。
-- -------------------- ---- ------- ----- - ------ ------ - ------- - ----- -- - ------ - ------ ------ -
在这里，我们使用了 flex: 1 来实现中间列的自适应宽度，它会自动占据剩余的宽度。而左右两列则直接设置了固定的宽度。
最后，我们为了保证布局在不同尺寸的屏幕上都适用，可以为 .container 设置 flex-wrap: wrap，使得当屏幕尺寸不足以容纳三列时，中间列可以自动换行显示。
.container {
display: flex;
flex-wrap: wrap;
}完整代码如下：
-- -------------------- ---- ------- ---- ------------------ ---- ------------------- ---- --------------------- ---- -------------------- ------ ------- ---------- - -------- ----- ---------- ----- - ----- - ------ ------ - ------- - ----- -- - ------ - ------ ------ - --------
示例
以下是一个具有实际效果的示例代码：
-- -------------------- ---- ------- ---- ------------------ ---- --------------------- ---- ------------------------- ---- ---------------------- ------ ------- ---------- - -------- ----- ---------- ----- ----------------- ----- -------- ----- - ----- - ------ ------ ------- ------ ----------------- -------- ------------- ----- - ------- - ----- -- ------- ------ ----------------- -------- ------------- ----- - ------ - ------ ------ ------- ------ ----------------- -------- - --------
运行效果如下图所示：
结论
使用 CSS Flexbox 可以实现左右固定宽度，中间自适应的三列布局，使得网页布局更加灵活、优雅。通过灵活妙用 Flexbox 属性，可以实现更多形式多样的页面布局。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66fbb350447136260160cfc9