flex 布局子元素被挤压的问题

在Flex布局中，子元素可能会遭受到挤压，这通常发生在父容器空间不足以容纳所有子元素时。为了解决这个问题，可以使用Flexbox的一些属性，如flex-grow、flex-shrink和flex-basis。

以下是一些处理Flex布局子元素挤压问题的常用方法：

1. 设置flex-grow属性：

   如果父容器有多余的空间，这个属性可以定义子元素如何分配额外空间。如果设置为1，则子元素将等分空间。如果设置为0，子元素不会增长。

2. 设置flex-shrink属性：

   当父容器空间不足以容纳所有子元素时，flex-shrink属性定义了子元素如何缩小自身大小来避免挤压。如果设置为1，子元素会等比缩小。如果设置为0，子元素不会缩小。

3. 设置flex-basis属性：

   这个属性定义了在分配多余空间之前，子元素的默认大小。可以用像素或百分比设置这个属性。

4. 使用align-self属性：

   这个属性可以覆盖容器的align-items属性，用来对齐单个子元素。

5. 使用min-width或min-height属性：

   为了防止挤压，可以设置子元素的最小宽度或高度，以确保它们至少有一个基本大小。

示例代码：

.container {
  display: flex;
}
 
.child {
  flex-grow: 1; /* 所有子元素等分父容器的额外空间 */
  flex-shrink: 0; /* 防止子元素在父容器空间不足时缩小 */
  flex-basis: 100px; /* 设置子元素的基础大小 */
  align-self: center; /* 单个子元素的垂直居中对齐 */
  min-width: 50px; /* 设置子元素的最小宽度 */
}

<div class="container">
  <div class="child">子元素1</div>
  <div class="child">子元素2</div>
  <div class="child">子元素3</div>
</div>

在实际应用中，根据具体需求选择适当的Flexbox属性来调整子元素的布局。