使用 flex-grow 和 flex-shrink 可实现响应式主次布局：侧边栏设 width: 200px 和 flex-shrink: 0 防压缩，主内容设 flex-grow: 1 占据剩余空间；小屏幕时通过媒体查询改为垂直堆叠，提升移动端体验。
在网页布局中，主次内容区域（如侧边栏+主内容）很常见。使用 Flexbox 可以轻松实现响应式效果，其中 flex-grow 和 flex-shrink 是关键属性。它们控制元素如何分配容器中的剩余空间以及是否允许压缩。
flex-grow 定义项目在容器中有剩余空间时，按比例扩展的能力。值为 0 表示不扩展；值越大，占据的额外空间越多。
flex-shrink 控制当空间不足时，项目是否允许缩小。默认值是 1，表示可压缩；设为 0 则保持原始尺寸（可能溢出）。
结合使用这两个属性，可以让主内容区灵活伸展，而侧边栏保持固定或有限变化。
立即学习“前端免费学习笔记（深入）”；
HTML 结构通常如下：
<div class="container">CSS 中启用 Flexbox：
.container {这样两个子元素会并排显示。接下来通过 flex-grow 和 flex-shrink 控制行为。
让主内容区填充剩余空间，侧边栏保持固定宽度：
.sidebar {这里 flex-shrink: 0 确保侧边栏不会因空间不足而变窄，避免文字挤在一起。而 flex-grow: 1 让主区域自动拉伸。
在小屏幕上可以改变布局方向或调整 flex 属性：
@media (max-width: 768px) {此时两个区域垂直堆叠，更适合手机浏览。主内容依然能自然撑开高度，无需额外设置 grow/shrink。
基本上就这些。通过合理使用 flex-grow 和 flex-shrink，配合固定尺寸和媒体查询，就能做出既美观又实用的响应式主次布局。不复杂但容易忽略细节。
以上就是如何在CSS中制作响应式主次内容区域布局_flex-grow flex-shrink应用的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
894
收藏
