flex: 1 1 auto 伸缩

flex: 1 1 auto。

是一种简写，关键值是: flex-grow、flex-shrink、flex-basis。定义了弹性项目在容器中的伸缩行为。

• flex-grow：定义了项目在有剩余空间时是否可以放大。

  • 1：表示允许比例放大，占据更多空间。

• flex-shrink：定义了项目在空间不足时是否可以缩小。

  • 1：表示允许按比例缩小，防止溢出。

• flex-basis：定义了项目在分配多余空间之前占据的初始大小。auto: 表示以项目的原始尺寸作为基准。（width 或内容大小）。

实际效果：

• 项目会基于其内容或设置的 width 作为基础尺寸。
• 如果容器有剩余空间，项目会按比例放大（因为 flex-grow: 1）。
• 如果容器空间不足，项目会按比例缩小（因为 flex-shrink: 1）。
• 这是 Flexbox 中最常用的“弹性”行为，让项目既能伸缩又能保留内容的基础尺寸。

等价写法：

flex: 1 1 auto; 等同于 flex: auto;（因为 auto 是 flex-basis 的常用值，且 flex 简写中 1 1 是默认的伸缩比例）。

.item {
  flex: 1 1 auto;  /* 有空间时放大，空间不足时缩小，基础尺寸为内容宽度 */
}

.item2 {
  flex: 1 1 0;     /* flex: 1; 基础尺寸为0，所有项目完全平分容器宽度 */
}

简单来说，flex: 1 1 auto; 让元素既会伸缩，又会尽量保留内容的原始宽度，是实现自适应布局的常用方式。