Flexbox 布局(Flexible Box Layout)是一种新的布局方式，能够简化前端页面的布局和排版，使得网页布局更加的灵活和自适应。此外，它还能够实现很多传统布局方法无法实现的功能，如上述题目中所提到的左右固定、中间自适应宽度的问题。本文将会探讨如何使用 Flexbox 布局实现这种布局效果。
什么是 Flexbox 布局
Flexbox 布局是一种基于弹性盒子的布局，可以让元素在容器内作为灵活的块级元素或者行内元素布局。弹性布局最大的优势是可以根据父容器的大小自适应调整子元素的大小和分配空间，适用于各种设备和屏幕的布局。
Flexbox 布局的核心概念有以下几个：
- 父容器 (Flex Container)：包含一组相似的子元素的容器，用于控制子项目如何定位、分布在容器内。当一个元素使用了 display: flex 或者 display: inline-flex 属性时，该元素即变成了一个 Flex Container。
- 项目 (Flex Item)：Flex Container 中的子元素，被灵活的布置在 Flex Container 的主轴或侧轴上。
- 主轴 (Main Axis)：Flex Container 的方向，可以是垂直或水平。默认为水平方向。
- 侧轴 (Cross Axis)：与主轴垂直的方向。
左右固定，中间自适应宽度布局实现
使用 Flexbox 布局实现左右固定，中间自适应的宽度效果，可以通过以下几个步骤实现：
第一步：设置父容器的 display 为 flex
在实现之前，需要设定一个布局目标：左右浮动部分固定，中间部分自适应宽度。为了实现这一目标，需要让页面布局成左右侧固定、中间自适应宽度的形式。
首先，需要将父容器的 display 属性设为 flex，以显示为弹性容器。
.container {
display: flex;
}第二步：设置左右两边的固定布局
接着，需要设定左右两边的固定宽度和布局方式。这里，我们将讲解两种不同的左右浮动部分固定的实现方式。
实现方式一：使用 flex 属性
可以通过设置左右两边元素的 flex 属性来实现元素在 flex 容器内的位置。
.left {
flex: 0 0 100px;
}
.right {
flex: 0 0 100px;
}这样，左右两边的元素即被设定为宽度为 100px 的固定宽度。
实现方式二：使用 margin
还可以使用 margin 实现，让左右两边的元素保持固定宽度。
-- -------------------- ---- ------- ----- - ------ ------ ------------- ----- - ------ - ------ ------ ------------ ----- -
这里，将 left 元素的 margin-right 和 right 元素的 margin-left 设为相同的值，即可保持它们之间的间隔。
第三步：设置中间自适应的布局
接着，需要设置中间部分的自适应宽度。这里可以通过 flex 属性或者 margin 属性来实现。
通过 flex 属性实现
可以将中间的元素的 flex 属性设为 1，使其占据剩余的所有可用空间。
.middle {
flex: 1;
}通过 margin 属性实现
也可以通过设置中间元素的 margin 属性来让其自适应缩放。
.middle {
margin-left: 20px;
margin-right: 20px;
}这里将中间元素的 margin-left 和 margin-right 设为相等的值，以保持对称性。
示例代码
我们来看一下完整的示例代码：
<div class="container"> <div class="left">左侧内容</div> <div class="middle">中间内容</div> <div class="right">右侧内容</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- - ----- - ----- - - ------ - ------- - ----- -- - ------ - ----- - - ------ -
或者：
<div class="container"> <div class="left">左侧内容</div> <div class="middle">中间内容</div> <div class="right">右侧内容</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- - ----- - ------ ------ ------------- ----- - ------- - ------------ ----- ------------- ----- - ------ - ------ ------ ------------ ----- -
总结
在本文中，我们介绍了使用 Flexbox 布局实现左右浮动部分固定，中间自适应宽度的方法。通过将父容器的 display 设为 flex，设置左右两个元素的固定宽度，再将中间的元素的 flex 属性或 margin 属性设定为自适应，即可实现该效果。希望本篇文章能够对大家有所启发，实践更多灵活自适应的网页布局。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645b4633968c7c53b0d9ef05