问题
如题,父元素设置 flex 布局后,子元素如果超出长度则会被压缩,如图:
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/ba29ae9dbd80699e65cc8d5c474344d9.png)
解决
子元素设置 flex-shrink: 0;
,默认值为 1
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/1f44371e72b246d513ccdc2498c5d457.png)
介绍 flex-shrink 属性
flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
.item {
flex-shrink: <number>;
}
如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。
负值对该属性无效。