CSS中的伸缩布局是一种非常强大的布局方式，可以通过设置比例来让子元素自动适应父元素的大小，充分发挥了元素间的关联性和伸缩性，极大地提高了页面的自适应性和灵活性。

.container {
display: flex; /* 设置为伸缩布局 */
}
.item {
flex: 1; /* 设置为1，表示此元素所占比例最大 */
}

在上面的代码中，我们首先将外部容器设置为伸缩布局，然后在子元素中设置比例，这里我们设置了一个flex属性，其中flex:1表示此元素所占比例最大。这样，无论父元素大小如何变化，子元素都会根据比例自动适应大小。

CSS伸缩布局的比例最大的特点就在于它的灵活性和响应性。通过灵活的比例设置，我们可以快速构建出各种不同的页面布局，而且由于它是基于父子元素实现的，所以也可以非常方便地实现响应式布局，适配各种不同设备的显示屏。

.container {
display: flex; /* 设置为伸缩布局 */
flex-direction: column; /* 设置为垂直方向布局 */
justify-content: center; /* 垂直居中 */
align-items: center; /* 水平居中 */
}
.item {
flex: 1; /* 设置为1，表示此元素所占比例最大 */
}

在上面的代码中，我们设置了一个容器，将其设置为垂直方向布局，并且通过justify-content和align-items属性将子元素垂直和水平居中。然后在子元素中设置比例，这里我们依然设置为flex:1，将比例设置为最大，这样在垂直方向上就可以自适应高度，而在水平方向上则会在居中的基础上填充整个父元素。

要想使用CSS伸缩布局，首先需要了解伸缩布局的基本概念和属性，并熟练掌握比例设置的方法。只有这样才能充分发挥伸缩布局的优势，实现更加灵活和响应的页面布局效果。