flex布局压缩子元素宽度

可以使用 flex-shrink 属性来压缩子元素的宽度。当容器空间不足时，子元素会按照 flex-shrink 的比例进行压缩，直到满足容器的大小为止。

例如，设置一个容器为 flex 布局，子元素为三个 div 元素，分别设置宽度为 100px、200px、300px，当容器宽度为 400px 时，第一个子元素会被压缩为 80px，第二个子元素会被压缩为 160px，第三个子元素不会被压缩。

示例代码如下：

<div class="container">
  <div class="item item1"></div>
  <div class="item item2"></div>
  <div class="item item3"></div>
</div>

.container {
  display: flex;
  width: 400px;
}

.item {
  height: 50px;
  margin-right: 10px;
}

.item1 {
  width: 100px;
  flex-shrink: 1;
}

.item2 {
  width: 200px;
  flex-shrink: 2;
}

.item3 {
  width: 300px;
}