因為父元素設(shè)置了【display: flex】所以該父元素下所有的子元素都會默認加上【flex: 0 1 auto】。
其中 1 就是 flex 中的 flex-shrink 屬性，表示開啟元素的收縮功能，所以子元素寬度才會失效。
flex 屬性用于設(shè)置或檢索彈性盒模型對象的子元素如何分配空間。
flex 屬性是 flex-grow、flex-shrink 和 flex-basis 屬性的簡寫屬性。
注意：如果元素不是彈性盒模型對象的子元素，則 flex 屬性不起作用。
默認值：0 1 auto
| 值 | 描述 |
|---|---|
| flex-grow | 一個數(shù)字，規(guī)定項目將相對于其他靈活的項目進行擴展的量。 |
| flex-shrink | 一個數(shù)字，規(guī)定項目將相對于其他靈活的項目進行收縮的量。 |
| flex-basis | 項目的長度。合法值："auto"、"inherit" 或一個后跟 "%"、"px"、"em" 或任何其他長度單位的數(shù)字。 |
| auto | 與 1 1 auto 相同。 |
| none | 與 0 0 auto 相同。 |
| initial | 設(shè)置該屬性為它的默認值，即為 0 1 auto。請參閱?initial。 |
| inherit | 從父元素繼承該屬性。請參閱?inherit。 |
解決方案
方案1
flex: 0 0 auto;
width: 200px;方案2
flex: 0 0 200px;方案3（推薦）文章來源：http://www.zghlxwxcb.cn/news/detail-797177.html
flex-shrink: 0;
width: 200px;方案4文章來源地址http://www.zghlxwxcb.cn/news/detail-797177.html
min-width: 200px;到了這里，關(guān)于flex 布局中子元素設(shè)置寬度無效的解決辦法的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
