flex布局下如何避免首个flex项坍缩且让最后一项占满剩余空间

你设置flex-shrink: 0的解决方案是完全正确的，这是Flex布局下处理该场景的标准用法。

问题根源 #

Flex容器的所有子项默认flex-shrink值为1，意味着当容器剩余空间不足时，所有子项都会按比例收缩。你给第三个元素.el3设置了width: 100%，会抢占大部分容器宽度，第一个元素.el1会被收缩到你设置的min-width: 5px下限，也就出现了你看到的「坍缩」现象。

之前尝试无效的原因 #

• flex-wrap: nowrap本身就是Flex容器的默认配置，新增设置不会产生任何效果，它仅控制子项是否换行，和子项是否收缩没有关联
• white-space: nowrap仅控制元素内部文本不换行，无法阻止Flex容器对子元素本身的宽度压缩，设置后只会出现文本溢出元素的情况，解决不了元素本身坍缩的问题

优化建议 #

可以保留你原来给.el1设置的min-width: 5px，搭配flex-shrink: 0使用，就算.el1内容为空时也会保留至少5px的可点击区域，刚好匹配你需要的点击快速定位焦点的需求，最终样式如下：

.el1 {
  min-width: 5px;
  flex-shrink: 0;
}

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