使用Flexbox实现三栏布局，父容器设为flex且不换行，左右栏定宽，中间栏通过flex-grow:1自适应填充剩余空间，并可设置min-width和margin优化显示效果。
实现左右固定宽度、中间自适应的三栏布局，使用 Flexbox 是最简洁高效的方式。通过 flex-grow 属性控制中间列自动填充剩余空间，能轻松达到理想效果。
基本HTML结构
布局需要一个父容器和三个子元素，分别代表左、中、右三栏：
<div class="container"> <div class="left">左侧固定</div> <div class="middle">中间自适应</div> <div class="right">右侧固定</div> </div>
CSS设置Flex容器
将父容器设为 flex 布局，并禁止换行：
.container {
display: flex;
flex-wrap: nowrap; /* 防止换行 */
}
这样三栏将在同一行内排列，为后续分配空间打下基础。
立即学习“前端免费学习笔记（深入）”；
设定左右固定宽度，中间自适应
给左右两栏设置固定宽度，比如 200px；中间栏使用 flex-grow: 1 占据剩余空间：
.left, .right {
width: 200px;
background-color: #e0e0e0;
}
<p>.middle {
flex-grow: 1;
background-color: #c0e6ff;
}</p>关键点在于 flex-grow: 1：它让中间列主动伸展，填满容器中未被左右占用的空间。
可选优化：限制最小宽度或添加间距
防止内容挤压变形，可以为中间列设置最小宽度：
.middle {
flex-grow: 1;
min-width: 300px; /* 内容不至于太窄 */
}
如需留白，可用 margin 或 padding：
.left { margin-right: 10px; }
.right { margin-left: 10px; }
基本上就这些。利用 Flexbox 的 flex-grow，无需计算百分比或使用浮动，就能自然实现左右固定、中间自适应的响应式布局。不复杂但容易忽略细节。
