Flexbox 布局是一种非常流行的 CSS3 新特性，它可以帮助我们更轻松地实现网页布局。本文将介绍如何使用 Flexbox 布局实现左侧固定，右侧自适应的网页布局。
Flexbox 布局的基本概念
在介绍具体的实现方法之前，我们先来了解一下 Flexbox 布局的基本概念。
Flexbox 布局中，有两个重要的概念：flex 容器和 flex 项目。flex 容器是包含了一组 flex 项目的容器，而 flex 项目则是在 flex 容器内部进行排列和布局的元素。
flex 容器有以下几个重要属性：
display:flex;：指定元素为一个 flex 容器；flex-direction: row/column;：指定 flex 容器内 flex 项目的排列方向；justify-content: flex-start/center/flex-end/space-between/space-around;：指定 flex 项目在主轴（即flex-direction指定的方向）上的对齐方式；align-items: flex-start/center/flex-end/baseline/stretch;：指定 flex 项目在侧轴（即与主轴垂直的方向）上的对齐方式；flex-wrap: wrap/nowrap/wrap-reverse;：指定当 flex 项目排列不下时，是否换行。
flex 项目有以下几个重要属性：
flex: none/1/auto;：指定 flex 项目占据的空间大小；align-self: auto/flex-start/flex-end/center/baseline/stretch;：指定该 flex 项目在侧轴上的对齐方式。
通过这些属性，我们可以灵活地控制 flex 容器和 flex 项目的排列和布局方式。
实现左侧固定，右侧自适应的布局
接下来，我们将利用上面的知识，使用 Flexbox 布局实现左侧固定，右侧自适应的布局。
首先，我们需要创建一个 div 元素作为容器：
<div class="flex-container"> <div class="left">Left</div> <div class="right">Right</div> </div>
然后，我们在 CSS 文件中定义容器和 flex 项目的样式：
-- -------------------- ---- ------- --------------- - -------- ----- ---------- ----- - ----- - ----- - - ------ -- ----- ----- -- ----------------- ----- - ------ - ----- - - ----- -- ----- -- ----------------- ----- -
通过设定 .left 元素的 flex 属性为 0 0 200px，我们可以让左侧固定宽度为 200px。.right 元素的 flex 属性为 1 1 auto，表示自适应剩余的宽度。同时，由于我们指定了容器的 flex-wrap 属性为 wrap，所以当容器宽度不足时，右侧元素会自动换行显示。
总结
本文介绍了 Flexbox 布局的基本概念，并以实例形式展示了如何使用 Flexbox 布局实现左侧固定，右侧自适应的布局。Flexbox 布局相比传统的 CSS 布局，具有更强的灵活性和可控性，可以帮助我们更轻松地实现各种复杂的网页布局。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645eeebd968c7c53b01146e3