在现代前端页面设计中，侧边栏和主要内容布局是非常常见的设计模式。使用 CSS Flexbox 可以轻松实现这种布局，无需使用传统的 float 和 position 定位技术。
什么是 CSS Flexbox？
CSS Flexbox 是一种强大的布局工具，它可以按照我们指定的方式对元素进行布局。Flexbox 可以让您轻松地实现各种布局模式，包括水平和垂直居中、均匀分布元素以及更复杂的布局模式。
下面的示例演示了如何使用 CSS Flexbox 实现一个简单的侧边栏和主要内容布局：
-- -------------------- ---- -------
------
---------------------
------
---- ----------------
-----
------
---- ----------------
------
------
-------
---------------------
--------- -------------------- ---- ------- ---- - -------- ----- --------------- ------- ------- ------ - ---- - -------- ----- ----- -- - -------- - ----- - - ------ ----------------- -------- - -------- - ----- -- ----------------- ----- -
在上面的代码中，我们使用 flexbox 将页面划分为一个包含页眉、页脚、侧边栏和主要内容的主要容器。我们设置了 body 元素为 flex 容器，并将其设置其方向为纵向（column），然后设置高度为 100vh。
在 main 元素中，我们使用了 flexbox 将侧边栏和主要内容容器放在同一行。我们使用 flex: 1 属性使 main 元素充满整个屏幕，并使侧边栏和主要内容容器按比例分配可用空间。
在 sidebar 和 content 容器中，我们使用 flex 属性为侧边栏容器设置一个固定宽度，并使用 background-color 属性为其设置背景颜色。对于主要内容容器，我们将 flex 属性设置为 1，以为其分配可用剩余空间。
结论
使用 CSS Flexbox 实现侧边栏和主要内容布局非常简单，无需使用传统的 float 和 position 定位技术。Flexbox 使得页面布局变得更加容易，并且能够适应各种设备和屏幕大小。您可以尝试使用上述代码作为起点，并根据自己的需求进行进一步修改。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67101b9a5f551281026918a1