image.png
以上截圖脖捻，代碼中名為
類型：的 div標(biāo)簽設(shè)置寬度90px伐庭。但是在展示時寬度為74.94px启具。
表面原因:
截圖中父標(biāo)簽中嵌入了兩個子標(biāo)簽荒辕，當(dāng)父標(biāo)簽設(shè)置
display:flex之后凳干，子標(biāo)簽中 右邊的input會把左邊的標(biāo)簽擠掉一部分辞居，所以導(dǎo)致了左邊的寬度顯示有問題。
根本原因：
父元素設(shè)置了
display:flex,那么所有的子標(biāo)簽都會默認(rèn)加上flex:0 1 auto;其中1 就是 flex中的 flex-shrink 屬性,表示開啟了元素的收縮功能，所以才會有90px變成了74.94px的問題廉沮。實際上也不一定為74.94px，也可能為60px,也可能為40px.....徐矩。
因此其中一種做法是：我們可以讓該標(biāo)簽的自動收縮關(guān)閉滞时，即flex:0 0 auto;,然后再設(shè)置該標(biāo)簽的寬度即可。
解決辦法(4種)
做法1:
flex: 0 0 auto;
width: 90px;
做法2:
flex: 0 0 90px;
做法3:(我用的這種)
flex-shrink:0;
width: 90px;
做法4:
min-width:90px;
