如何为Flexbox中间列设置宽度并允许其在窄屏时收缩？

要让中间列保持默认宽度，同时在屏幕过窄时可以收缩到小于设定值，只需调整中间列的flex属性，替代单纯的width设置即可：

核心是给.middle设置 flex: 0 1 200px，各值的作用：

• 0：flex-grow，表示中间列不会主动抢占额外空间
• 1：flex-shrink，允许中间列在容器空间不足时自动收缩
• 200px：flex-basis，作为中间列的默认宽度，替代原来的width

修改后的完整代码：

.container {
  display: flex;
}

.left {
  flex: 1;
  background: yellow;
}

.middle {
  background: blue;
  /* 替换width为flex属性 */
  flex: 0 1 200px;
}

.right {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  background: red;
}

<div class="container">
  <div class="left">
    Left column
  </div>
  <div class="middle">
    Middle column
  </div>
  <div class="right">
    Right column
  </div>
</div>

当容器宽度足够时，中间列会保持200px的宽度，左右列平分剩余空间；当容器宽度缩小到不足以容纳左右列最小宽度+200px时，中间列会开始收缩。如果需要限制中间列的最小收缩宽度，可以额外添加min-width属性（比如min-width: 100px），避免列宽缩得过小。

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