使用 flex-grow 和 flex-shrink 可实现响应式主次布局：侧边栏设 width: 200px 和 flex-shrink: 0 防压缩，主内容设 flex-grow: 1 占据剩余空间；小屏幕时通过媒体查询改为垂直堆叠，提升移动端体验。
在网页布局中，主次内容区域（如侧边栏+主内容）很常见。使用 Flexbox 可以轻松实现响应式效果，其中 flex-grow 和 flex-shrink 是关键属性。它们控制元素如何分配容器中的剩余空间以及是否允许压缩。
理解 flex-grow 与 flex-shrink
flex-grow 定义项目在容器中有剩余空间时，按比例扩展的能力。值为 0 表示不扩展；值越大，占据的额外空间越多。
flex-shrink 控制当空间不足时，项目是否允许缩小。默认值是 1，表示可压缩；设为 0 则保持原始尺寸（可能溢出）。
结合使用这两个属性，可以让主内容区灵活伸展，而侧边栏保持固定或有限变化。
立即学习“前端免费学习笔记（深入）”；
基本结构与 Flex 布局设置
HTML 结构通常如下：
<div class="container"><aside class="sidebar">侧边栏</aside>
<main class="main-content">主内容</main>
</div>
CSS 中启用 Flexbox：
display: flex;
}
这样两个子元素会并排显示。接下来通过 flex-grow 和 flex-shrink 控制行为。
设置主内容自适应，侧边栏固定宽度
让主内容区填充剩余空间，侧边栏保持固定宽度：
.sidebar {width: 200px;
flex-shrink: 0; /* 防止被压缩 */ }
.main-content {
flex-grow: 1; /* 占据所有可用空间 */
flex-shrink: 1;
}
这里 flex-shrink: 0 确保侧边栏不会因空间不足而变窄，避免文字挤在一起。而 flex-grow: 1 让主区域自动拉伸。
响应式优化：不同屏幕下的行为调整
在小屏幕上可以改变布局方向或调整 flex 属性：
@media (max-width: 768px) {.container {
flex-direction: column;
}
.sidebar,
.main-content {
width: auto;
}
}
此时两个区域垂直堆叠，更适合手机浏览。主内容依然能自然撑开高度，无需额外设置 grow/shrink。
基本上就这些。通过合理使用 flex-grow 和 flex-shrink，配合固定尺寸和媒体查询，就能做出既美观又实用的响应式主次布局。不复杂但容易忽略细节。
