使用CSS设置伸缩布局需要使用flexbox（弹性盒子）布局，通过设置容器的display属性为flex来启用弹性布局。下面是设置弹性布局的代码：
.container {
display: flex; /* 设置容器为弹性布局 */
}
弹性布局中有两个重要的概念：容器和项目。容器是包含项目的父元素，而项目则是容器的子元素。弹性布局通过设置容器和项目的属性来实现伸缩布局。
下面是一些常用的属性：
- flex-direction：设置主轴方向。可以是row（水平方向）、column（垂直方向）、row-reverse（水平方向相反）、column-reverse（垂直方向相反）。
- justify-content：设置主轴上的对齐方式。可以是flex-start（起点对齐）、flex-end（终点对齐）、center（居中对齐）、space-between（两端对齐）、space-around（每个项目周围都有空白间隔）。
- align-items：设置交叉轴上的对齐方式。可以是flex-start（起点对齐）、flex-end（终点对齐）、center（居中对齐）、stretch（拉伸对齐）、baseline（基线对齐）。
- flex-wrap：设置是否换行。可以是nowrap（不换行）、wrap（换行）、wrap-reverse（反向换行）。
- align-content：设置多行项目的对齐方式。可以是flex-start（起点对齐）、flex-end（终点对齐）、center（居中对齐）、stretch（拉伸对齐）、space-between（两端对齐）、space-around（每个项目周围都有空白间隔）。
除了以上属性外，还有一些常用的项目属性：
- order：设置项目的排列顺序。
- flex-grow：设置项目的放大比例。
- flex-shrink：设置项目的缩小比例。
- flex-basis：设置项目的基准大小。
需要注意的是，弹性布局是比较新的布局方式，一些老旧的浏览器可能不支持。可以在Can I Use网站上查看浏览器兼容性。
2023-05-11 16:48:50 更新