flex布局元素被挤掉的解决办法

背景

使用flex写列表时遇到的前面块的布局被挤掉，遇到各种大坑小坑，有人说使用overflow: hidden等解决找了一堆，最终解决办法还是研究一下flex的文档才发现这个属性！

示意图

解决前

解决后

知识点

flex-shrink
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

解决办法

总结

解决不了问题时应该静下心来仔细阅读相关文档语法规则，而不是盲目的网上找解决方案！

饮水思源

• flex布局教程