css display:flex 弹性布局 子标签设置宽度无效的

以上截图，代码中名为类型：的 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;