Flex布局中相邻元素设flex:1为何影响另一元素固定宽度？

核心逻辑拆解 #

你的问题本质是flex布局的空间分配规则在不同属性配置下的表现差异，下面一步步讲清楚：

• flex子元素的默认属性
  所有flex子元素默认的flex属性值是flex: 0 1 auto，对应三个细分属性：

  • flex-grow: 0：不主动抢占容器剩余空间
  • flex-shrink: 1：当容器空间不足时，会按比例收缩
  • flex-basis: auto：子元素的基准尺寸由自身内容或设定的宽高决定

• 未给文本区加flex:1时的异常原因
  预览区设了width:100px，它的flex-basis会继承这个宽度值；而文本区的flex-basis是auto，由自身内容宽度决定。如果文本区内容宽度较大，两者的基准尺寸之和超过容器的350px，此时两个子元素都会触发flex-shrink:1的收缩规则，按各自基准尺寸的比例压缩空间。预览区的100px会被按比例缩小，所以看起来宽度“异常”。

• 添加flex:1后预览区正常的原理
  flex:1是flex:1 1 0%的简写，关键变化有两个：

  1. flex-grow:1：文本区会主动抢占容器中所有剩余可用空间（容器总宽350px - 预览区100px = 250px，全部分配给文本区）
  2. flex-basis:0%：文本区的基准尺寸被重置为0，不再受自身内容宽度影响
     此时容器的空间被完全分配：预览区占100px，文本区占剩余250px，没有多余空间需要收缩，所以预览区能保持设定的100px宽度。

补充解决思路 #

如果不想给文本区加flex:1，也可以给预览区设置flex-shrink:0，强制它不参与空间收缩，这样即使文本区内容超宽，预览区也能稳定保持100px宽度。

内容的提问来源于stack exchange，提问作者hobror