随着网页设计和布局方式的变化，Flexbox 布局成为了前端开发者的一种必备技术。相对于传统的固定宽度布局方式，Flexbox 布局可实现更加灵活自适应的布局方式，能够更好地适应不同的屏幕尺寸。本文将提供一种实现两列左右固定中间自适应的解决方案。
什么是 Flexbox 布局？
Flexbox 布局（也称为弹性盒布局）是一种用于为容器中的元素分配空间的布局方式。元素基于其可用空间分布在容器中，从而为用户提供更加灵活和适应性强的布局。当然，在这个过程中，一些浏览器可能不支持这项新技术，因此我们需要使用雅虎的 YUI 库或者 Modernizr 来检测其是否支持此新特性。不过，此种布局方式早已支持主流浏览器，包括 IE11 的 Edge。
如何使用 Flexbox 布局？
要使用 Flexbox 布局，必须先定义一个容器，然后将容器中的元素设置为弹性盒。
.container {
display: flex;
}上述代码将容器设置为弹性盒。下面是一些其他属性:
flex-direction: 定义弹性盒的主轴方向。flex-wrap: 定义子元素的排列方式是否换行。flex-flow: 上面两个属性的缩写。justify-content: 定义子元素在主轴方向上的对齐方式。align-items: 定义子元素在交叉轴方向上的对齐方式。align-content: 定义多行子元素在交叉轴方向上的对齐方式。
在本例中，我们将使用 flex-direction 和 flex-grow 属性。
.container {
display: flex;
flex-direction: row;
}在这个例子中，Flexbox 布局的主轴方向被设为行。由于我们希望固定左侧和右侧栏的宽度，而中间栏的宽度应该自适应，因此我们可以将左侧和右侧栏的宽度设置为固定像素值，中间栏的宽度设置为 flex-grow 属性。
-- -------------------- ---- ------- ---------- ------ ------ ------ - ---------- -------- ---------- -- - ---------- ------- ------ ------ -
在这个例子中，左侧和右侧栏的宽度为 100px 和 150px，中间栏使用 flex-grow 设置为 1。这表示它可以根据其余可用空间在主轴上自动扩展，直到达到最大值或填满空间。
下面是这个例子完整的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------- ------------------------------
-------
---------- -
-------- -----
--------------- ----
-
---------- ------
------ ------
-
---------- --------
---------- --
-
---------- -------
------ ------
-
---------- ------ ---------- -------- ---------- -------
------- ------
-
---------- ------
----------------- ------
-
---------- --------
----------------- ----
-
---------- -------
----------------- -----
-
--------
-------
------
---- ------------------
---- -------------------
---- ---------------------
---- --------------------
------
-------
-------总结
本文介绍了使用 Flexbox 布局实现两列左右固定中间自适应的解决方案。将容器设置为弹性盒，可以轻松地管理子元素的排列方式和间距，从而为用户提供更加灵活和适应性强的布局方式。在实际开发中，灵活运用 Flexbox 布局可达到事半功倍的效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646dbc99968c7c53b0c5e59c