Flexbox 是 CSS3 中的一种布局方式，它可以很方便地实现各种复杂的布局，包括自适应两栏布局。
什么是自适应两栏布局
自适应两栏布局是指页面中有两个栏，其中一个栏宽度不变，另一个栏会根据浏览器窗口大小的变化而自适应宽度，这种布局方式可以适应不同设备上的不同屏幕尺寸。
如何使用 Flexbox 实现自适应两栏布局
首先在 HTML 的 body 中添加两个 div 标签，一个作为左侧的固定宽度栏，一个作为右侧的自适应宽度栏。然后，在 CSS 中添加以下代码：
---- -
-------- -----
-
----- -
------ ------
-
------ -
----- --
-以上代码中，我们将 body 的 display 属性设置为 flex，这样它的子元素就可以使用 Flexbox 实现布局了。 left 元素的宽度设置为 200px，它是一个固定宽度的栏目。 right 元素的 flex 属性设置为 1，这样就可以自适应宽度了。
示例代码
--------- -----
------
------
---------- ------- -----------------
-------
---- -
-------- -----
-
----- -
----------------- --------
------ ------
------- ------
-
------ -
----------------- --------
----- --
------- ------
-
--------
-------
------
---- -------------------
---- --------------------
-------
-------总结
CSS Flexbox 是实现自适应两栏布局的一种简单有效的方式，在设计响应式布局时可以很好地应用它。掌握了 Flexbox 布局之后，你可以灵活地运用它来实现各种复杂的布局，使你的网站在不同设备上表现得更加出色。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64a938d948841e989457ee9c