Flexbox 优雅实现三栏式布局

HTML 结构

<div class="container">
    <div class="left">左侧边栏</div>
    <div class="middle">
        <h2>中间内容区</h2>
        <p>自适应，且在任何屏幕尺寸下都表现良好。</p>
    </div>
    <div class="right">右侧边栏</div>
</div>

CSS核心代码

.container {
    display: flex;
    justify-content: center /* 关键：优化超宽屏居中 */
    min-height: 200px;
    border: 1px solid #ccc;
}

.left, .right {
    width: 200px;
    flex-shrink: 0; /* 关键： 防止窄屏压缩*/
    min-width: 200px; /* 可以作为替代flex-shrink */
    background-color: #f0f0f0;
}

.middle {
    flex-grow: 1; /* 关键： 占据剩余空间 */
    max-width: 1080px; /* 关键： 限制最大宽度 */
    background-color：#e0e0e0;
}

flex-grow: 定义了元素在 容器有剩余空间 时的 放大 能力。

flex-shrink: 定义了元素在 容器空间不足 时的 收缩 能力。(默认为1)

min-width/max-width: 为元素尺寸设定了绝对的边界，它们的优先级很高，可以釜盖flex属性的计算结果。

j结论： 在构建复杂的响应式布局时，必须结合min/max-width来处理临界情况，确保内容在任何屏幕尺寸下都能稳定，可用且美观的呈现。