image.png
以上截图，代码中名为
类型：的 div标签设置宽度90px。但是在展示时宽度为74.94px。
表面原因:
截图中父标签中嵌入了两个子标签，当父标签设置
display:flex之后，子标签中 右边的input会把左边的标签挤掉一部分，所以导致了左边的宽度显示有问题。
根本原因：
父元素设置了
display:flex,那么所有的子标签都会默认加上flex:0 1 auto;其中1 就是 flex中的 flex-shrink 属性,表示开启了元素的收缩功能，所以才会有90px变成了74.94px的问题。实际上也不一定为74.94px，也可能为60px,也可能为40px.....。
因此其中一种做法是：我们可以让该标签的自动收缩关闭，即flex:0 0 auto;,然后再设置该标签的宽度即可。
解决办法(4种)
做法1:
flex: 0 0 auto;
width: 90px;
做法2:
flex: 0 0 90px;
做法3:(我用的这种)
flex-shrink:0;
width: 90px;
做法4:
min-width:90px;
网友评论