Flex布局--完美解决部分元素被挤压(flex-shrink属性)

在Flex布局中，如果容器内的子元素总宽度超过容器本身的宽度，默认情况下，子元素会根据flex-shrink属性的值来收缩自身大小以避免溢出。flex-shrink属性定义了项目的缩放比例，它的默认值是1，表示当空间不足时该项目会缩小。

如果你希望某些元素即使在空间不足的情况下也不被压缩，可以将其flex-shrink属性设置为0。

例如，假设有一个Flex容器，它有三个子元素，你想让第三个子元素不被压缩：

.container {
  display: flex;
}
 
.item1 {
  /* 默认的flex-shrink值为1，如果空间不足，将会缩小 */
}
 
.item2 {
  /* 同上 */
}
 
.item3 {
  flex-shrink: 0; /* 设置为0，不会缩小 */
  /* 为了保证不被压缩，可能还需要设置最小宽度或者其他样式来保证内容的可读性 */
  min-width: 0; /* 确保该元素的最小宽度为0，允许内容显示 */
}

HTML代码如下：

<div class="container">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3 - 不会被压缩</div>
</div>

在这个例子中，item3将不会在空间不足时被缩小，从而避免其内容被压缩或者看不清楚。