1. 介绍
在前端开发中，我们经常会遇到需要将页面分为两个固定宽度的列，中间列则自适应宽度布局的需求。这种布局方式在实际应用中非常常见，例如左侧导航栏与右侧内容区域的布局。在本文中，我们将使用CSS实现一种经典的“两边固定中间自适应”的布局。
2. HTML 结构
首先，让我们来定义需要布局的 HTML 结构。通常情况下，我们会使用一个外层容器包裹整个布局，然后在内部设置三个容器分别表示左侧固定列、中间自适应列和右侧固定列。
以下是一个示例的 HTML 结构：
<div class="wrapper">
<div class="left-column">
<!-- 左侧固定列内容 -->
</div>
<div class="middle-column">
<!-- 中间自适应列内容 -->
</div>
<div class="right-column">
<!-- 右侧固定列内容 -->
</div>
</div>
3. CSS 样式
3.1 外层容器样式
首先，我们需要对外层容器进行一些样式设置，使其能够包裹整个布局，并且正确地显示在页面中。
.wrapper {
display: flex; // 设置弹性布局
}
3.2 左侧固定列样式
接下来，我们设置左侧固定列的样式。通常情况下，左侧固定列会具有一个固定的宽度，并且它的内容可能会超出该宽度而产生溢出。
.left-column {
width: 200px; // 设置固定宽度
overflow: auto; // 设置溢出时显示滚动条
}
3.3 中间自适应列样式
中间自适应列需要占据剩余的空间，并扩展到可用空间的最大宽度。我们可以使用 flex-grow 属性来实现这一效果。
.middle-column {
flex-grow: 1; // 占据剩余空间
}
3.4 右侧固定列样式
右侧固定列的样式与左侧固定列类似，需要具有一个固定的宽度，并且溢出时显示滚动条。
.right-column {
width: 200px; // 设置固定宽度
overflow: auto; // 设置溢出时显示滚动条
}
4. 示例
通过以上的 CSS 样式设置，我们已经实现了“两边固定中间自适应”的布局。将上述样式代码应用到示例的 HTML 结构中，即可得到以下效果：
<div class="wrapper">
<div class="left-column">
<!-- 左侧固定列内容 -->
</div>
<div class="middle-column">
<!-- 中间自适应列内容 -->
</div>
<div class="right-column">
<!-- 右侧固定列内容 -->
</div>
</div>
5. 总结
通过使用 CSS 的 flex 布局，我们可以很容易地实现“两边固定中间自适应”的布局。只需要对外层容器设置 display: flex 属性，并对需要固定宽度的列设置相应的宽度和溢出样式，就可以实现这种常见的布局需求。
希望本文对你理解和实现这种布局方式有所帮助。