答案：CSS中通过Flexbox的flex属性控制子元素伸缩比例。设置flex:1可等比分配剩余空间，flex:2则占两倍比例，实现如1:2:1的响应式布局，需父容器设display:flex，利用flex-grow的相对性灵活调整尺寸。
在CSS布局中，控制子元素的伸缩比例主要依赖于 Flexbox 布局中的 flex 属性。通过设置子元素的伸缩比例，可以让容器内的元素根据可用空间自动调整大小，实现灵活响应式布局。
flex属性详解
flex 是 flex-grow、flex-shrink 和 flex-basis 的简写属性，语法如下：
最常用的是只设置 flex-grow 来控制子元素的拉伸比例。
控制伸缩比例的方法
假设父容器启用了 Flex 布局，子元素通过 flex 值来决定如何分配剩余空间。
立即学习“前端免费学习笔记（深入）”；
移动端UI&微信UI YDUI Touch
下载
YDUI Touch专为移动端打造，在技术实现、交互设计上兼容主流移动设备，保证代码轻、性能高；使用 Flexbox 技术，灵活自如地对齐、收缩、扩展元素，轻松搞定移动页面布局；用 rem 实现强大的屏幕适配布局，等比例适配所有屏幕；自定义Javascript组件、Less文件、Less变量，定制一份属于自己的YDUI。
-
flex: 1：子元素等比拉伸，占据所有剩余空间。多个子元素设为
flex: 1时，它们将平分可用空间。 -
flex: 2：该元素的拉伸比例是
flex: 1元素的两倍。例如，一个元素设为flex: 2，另一个为flex: 1，则前者占 2/3 空间，后者占 1/3。 - flex: 0 1 auto：默认值，不放大，但可缩小，基于内容大小。
- flex: none：完全不伸缩，保持原始尺寸。
实际示例
以下是一个三栏布局，中间栏宽度自适应，两侧按比例伸缩：
.container {display: flex;
}
.left { flex: 1; }
.middle { flex: 2; }
.right { flex: 1; }
此时左右栏各占一份，中间占两份，总比例为 1:2:1，即使容器宽度变化，比例关系保持不变。
注意事项
伸缩比例只在父容器有剩余空间（或空间不足需要压缩）时起作用。确保父容器设置了 display: flex 或 display: inline-flex。
- 子元素的初始大小受内容影响，
flex-basis可用来覆盖此行为。 - 若希望某个元素不参与伸缩，明确设置
flex: none或flex: 0。
基本上就这些。合理使用 flex 的比例值，能快速构建弹性、响应式的布局结构，无需计算具体宽度。关键在于理解 flex-grow 的相对性——它不是绝对值，而是与其他子元素之间的比例关系。
