在前端开发中，我们经常会遇到需要左边固定宽度，右边自适应宽度的布局。在过去，这种布局往往需要通过定位等方式实现，但这种方式可能会带来一些问题，比如不兼容性、布局不够灵活等。而现在，使用 Flexbox 技术可以轻松实现这种布局，下面就来详细介绍一下。
理解 Flexbox
Flexbox 是 CSS 的一种布局模式，它有助于解决基于弹性盒模型的布局问题。它主要的思想是让容器能够自适应其子元素的宽度、高度和顺序，以达到更灵活的布局效果。在不需要使用浮动或者定位的情况下，轻松实现复杂的布局是 Flexbox 的一大优势。
实现左边固定右边自适应布局
HTML 结构
首先，我们要先定义好 HTML 结构，布局如下：
<div class="container"> <div class="left">左边的固定宽度</div> <div class="right">右边的自适应宽度</div> </div>
使用 Flexbox 实现布局
接下来，我们使用 Flexbox 技术实现布局。需要注意的是，我们需要同时设置容器和子元素的样式。
-- -------------------- ---- ------- ---------- - -------- ----- - ----- - ------ ------ -- ------ -- - ------ - ----- -- -- ------- -- -
- 首先，我们将容器设置为 Flex 布局，这样容器内的子元素就可以方便地调整位置和尺寸了。
- 然后，我们将左边的宽度设置为 200px，这是我们要固定的宽度。
- 最后，我们将右边的宽度设置为 flex: 1;，这表示右边的宽度会自动扩展至容器宽度减去左边宽度后的剩余宽度。
完整示例代码
下面为完整的 HTML 和 CSS 示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
-------------- -------------------
-------
---------- -
-------- -----
-
----- -
------ ------
----------------- --------
-
------ -
----- --
----------------- --------
-
--------
-------
------
---- ------------------
---- -------------
-------
------
---- --------------
--------
------
------
-------
-------总结
Flexbox 是一种非常有用的布局技术，它可以帮助我们轻松实现复杂的布局效果。在本文中，我们通过一个实例介绍了如何使用 Flexbox 实现左边固定右边自适应布局，这将有助于你更好地掌握这项技术。让我们一起享受一个更简单、更高效、更美好的前端开发体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647861e8968c7c53b04a051d