Flexbox布局：flex-grow与flex-shrink应用解析

有志者，事竟成！如果你在学习文章，那么本文《CSS响应式布局中，使用Flexbox的flex-grow和flex-shrink属性可以实现主次模块的比例自适应。以下是具体实现方式：1. Flexbox 基础概念Flexbox 是一种用于创建灵活布局的 CSS 布局模型，它允许容器内的子元素（称为 flex items）根据可用空间自动调整大小和位置。flex-grow：定义子元素在主轴上的增长比例。flex-shrink：定义子元素在主轴上的收缩比例。2. 设置容器为 Flex 容器首先，将父容器设置为 Flex 容器：.container { display: flex; }3. 使用 flex-grow 调整主模块比例如果你希望某个模块（如主要内容区）占据更多空间，可以为其设置较大的 flex-grow 值，而其他模块设置较小或默认值（0）。例如：.main-content { flex-grow: 3; /* 占据 3/4 的空间 */ } .sidebar { flex-grow: 1; /* 占据 1/4 的空间 */ }这样，当容器宽度变化时，.main-content 会比 .sidebar 更多地扩展。4. 使用 flex-shrink 调整次模块比例如果希望某些》，就很适合你！文章讲解的知识点主要包括，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

使用Flexbox的flex-grow与flex-shrink属性可实现主次模块比例自适应，如侧边栏固定宽度、主内容区占剩余空间或按比例伸缩；通过设置flex-shrink控制空间不足时的压缩优先级，结合flex-basis用flex复合属性统一定义伸缩行为，使布局在不同屏幕下自然协调。

在响应式网页布局中，主次模块比例自适应是常见需求。比如侧边栏固定宽度、主内容区占据剩余空间，或两者按比例伸缩。使用 CSS 的 Flexbox 布局，通过 flex-grow 与 flex-shrink 属性可以灵活控制子元素的伸缩行为，实现动态适配不同屏幕尺寸。

flex-grow 控制剩余空间分配

当容器有剩余空间时，flex-grow 决定子元素如何“拉伸”以填充这些空间。其值为相对比例系数。

例如，主内容区希望占满剩余空间，侧边栏保持固定：

.container {
  display: flex;
}
<p>.sidebar {
width: 200px;
flex-shrink: 0; /<em> 防止被压缩 </em>/
}</p><p>.main-content {
flex-grow: 1; /<em> 占据所有可用空间 </em>/
}</p>

此时，main-content 会自动填满 container 中除 sidebar 外的空间，窗口变宽时它也随之变宽，实现自适应。

flex-shrink 控制空间不足时的压缩比例

当容器空间不足时，子元素默认会被压缩。flex-shrink 定义了它们的“压缩优先级”，值越大，压缩越多。

假设两个模块初始宽度相同，但希望次要模块在小屏下收缩更明显：

.flex-container {
  display: flex;
}
<p>.primary {
width: 200px;
flex-shrink: 1;
}</p><p>.secondary {
width: 150px;
flex-shrink: 2; /<em> 空间紧张时压缩更多 </em>/
}</p>

当屏幕变窄，secondary 模块比 primary 被压缩得更厉害，保障重要内容显示。

结合 flex-basis 实现精细控制

实际开发中，推荐使用 flex 复合属性，统一设置 flex-grow、flex-shrink 和 flex-basis。

例如主模块占 70%，副模块占 30%，且都能弹性伸缩：

.container {
  display: flex;
}
<p>.main {
flex: 1 1 70%; /<em> grow=1, shrink=1, 基础宽度70% </em>/
}</p><p>.aside {
flex: 1 1 30%;
}</p>

这样在不同设备上，两者按比例分配空间，同时具备伸缩能力，避免溢出或留白过多。

基本上就这些。掌握 flex-grow 与 flex-shrink 的比例逻辑，再配合 flex-basis，就能让主次模块在各种屏幕下自然协调，实现真正意义上的响应式自适应布局。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~