CSS Flexbox 是一种强大的布局模式，它可以帮助我们轻松地实现各种复杂的布局。在本文中，我们将讨论如何使用 CSS Flexbox 实现固定高度自适应宽度布局。
什么是固定高度自适应宽度布局？
固定高度自适应宽度布局是一种常见的布局模式，它的高度是固定的，宽度会根据容器的大小自适应调整。这种布局适用于很多场景，例如网站的头部、底部、侧边栏等等。
使用 CSS Flexbox 实现固定高度自适应宽度布局
下面是一个简单的 HTML 结构，我们将使用 CSS Flexbox 实现固定高度自适应宽度的布局。
-- -------------------- ---- -------
---- ------------------
---- ---------------------
------------
---------------
------
---- ---------------------
---------------
------------------
------
------我们的目标是让左侧栏的宽度固定，而主要内容区域的宽度自适应调整。我们可以使用 CSS Flexbox 的 flex-grow 属性来实现这个目标。
首先，我们需要将容器设置为 Flexbox 布局模式，这可以通过设置容器的 display 属性为 flex 来实现。
.container {
display: flex;
}接下来，我们需要设置左侧栏的宽度，这可以通过设置左侧栏的 flex-basis 属性来实现。我们将左侧栏的 flex-basis 属性设置为 200px，表示左侧栏的宽度为 200px。
.left-sidebar {
flex-basis: 200px;
}最后，我们需要设置主要内容区域的 flex-grow 属性为 1，表示主要内容区域的宽度会自适应调整。
.main-content {
flex-grow: 1;
}现在，我们已经成功地使用 CSS Flexbox 实现了固定高度自适应宽度的布局。
示例代码
完整的 HTML 和 CSS 代码如下所示：
-- -------------------- ---- -------
--------- -----
------
------
---------- ------- ---------------------
-------
---------- -
-------- -----
-
------------- -
----------- ------
----------------- --------
-
------------- -
---------- --
----------------- -----
-
--------
-------
------
---- ------------------
---- ---------------------
------------
---------------
------
---- ---------------------
---------------
------------------
------
------
-------
-------总结
CSS Flexbox 是一种强大的布局模式，它可以帮助我们轻松地实现各种复杂的布局。在本文中，我们讨论了如何使用 CSS Flexbox 实现固定高度自适应宽度的布局，并提供了示例代码。希望这篇文章对你有所帮助，谢谢阅读！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65fbbfddd10417a222751ded