伸缩盒是CSS 3中新增的布局方式，它可以更加灵活地控制元素的排列和定位。在使用伸缩盒布局时，我们需要使用一些属性来定义伸缩盒容器和伸缩盒子元素的布局方式。

首先，我们需要定义一个伸缩盒容器，可以使用display:flex;来将一个元素定义为伸缩盒容器。接下来，我们可以设置一些伸缩盒容器的属性来控制子元素的排列方式：

.container {
display: flex; /* 将容器定义为伸缩盒 */
flex-direction: row; /* 设置子元素排列方向，有row和column两个值 */
justify-content: center; /* 设置水平方向上子元素的对齐方式 */
align-items: center; /* 设置垂直方向上子元素的对齐方式 */
}

在伸缩盒容器中，每一个子元素都是伸缩盒子元素。我们可以设置一些伸缩盒子元素的属性来控制它们在伸缩盒容器中的排列方式，比如flex-grow、flex-shrink和flex-basis等属性。

.container div {
flex-grow: 1; /* 设置子元素的放大比例 */
flex-shrink: 1; /* 设置子元素的缩小比例 */
flex-basis: auto; /* 设置子元素的基准值，可以是auto或一个具体的长度值 */
}

通过使用这些属性，我们可以实现各种复杂的布局方式。伸缩盒布局可以实现响应式布局，使网页在不同设备上的显示效果更加适配。然而，在使用伸缩盒布局时，需要注意兼容性问题，因为某些旧版浏览器可能不支持这些CSS 3属性。