用Flex布局实现左右固定、中间自适应，关键是容器设display: flex，左右区域用width或flex: 0 0 auto，中间区域用flex-grow: 1占满剩余空间。
<p>用 Flex 布局实现左右固定、中间自适应，关键是把容器设为 <strong>display: flex</strong>，左右区域设置固定宽度（或 <strong>flex: 0 0 auto</strong>），中间区域用 <strong>flex-grow: 1</strong> 占满剩余空间。</p>
<H3>基础 HTML 结构</H3>
<p>保持语义清晰，结构简单：</p>
<font size="2"><div class="container"><br>
<div class="left">左栏</div><br>
<div class="main">中间内容（自适应）</div><br>
<div class="right">右栏</div><br>
</div></font>
<H3>核心 CSS 设置</H3>
<p>容器启用 Flex，子项按需分配空间：</p>
<font size="2">.container {<br>
display: flex;<br>
}<br>
.left,<br>
.right {<br>
width: 200px; /* 或 flex: 0 0 200px */<br>
flex-shrink: 0; /* 防止被压缩 */<br>
}<br>
.main {<br>
flex-grow: 1; /* 关键：撑开占满剩余宽度 */<br>
min-width: 0; /* 可选：防止内容溢出时破坏布局（尤其含长文本/内联元素） */<br>
}</font>
<H3>常见注意事项</H3>
<ul>
<li>左右栏用 <strong>width + flex-shrink: 0</strong> 更直观；也可统一用 <strong>flex: 0 0 200px</strong>（不放大、不缩小、基准宽 200px）</li>
<li>中间区域建议加 <strong>min-width: 0</strong>，避免内部文字或 flex 子项导致容器异常撑宽</li>
<li>若中间区域有 padding/margin，不影响 flex-grow 计算，但注意盒模型（推荐用 box-sizing: border-box）</li>
<li>不需要设置 <strong>flex-basis</strong>（如 flex: 1），因为 flex-grow: 1 已足够；flex: 1 等价于 flex: 1 1 0%，但语义不如显式写 flex-grow 清晰</li>
</ul>
<H3>响应式小优化（可选）</H3>
<p>在小屏下可改为垂直堆叠：</p>
<font size="2">@media (max-width: 768px) {<br>
.container {<br>
flex-direction: column;<br>
}<br>
.left,<br>
.right {<br>
width: auto;<br>
flex: none;<br>
}<br>
.main {<br>
flex-grow: 0;<br>
}<br>
}</font>
