下面代碼，flex自適應布局，但是圖片寬度變窄了而不是文字的寬度變窄，我測試過是文字影響了導致沒法自？
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style>body{margin:0px;}.cont<愛尬聊_百科網>ainer{ display:flex; width:170px;}.image{/*float:left;*/height:100px;width:100px; margin-right:15px;}.news{ /*float:left;*/ flex-grow:1;/*flex-shrink:7;*/ /*width:170px;*/ height:100px; line-height:25px; font-family:"宋體"; overflow:hidden; }.title{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-weight:bold;font-size:16px; }.paragraph{font-size:14px;color:#666;} </style> </head> <body> <div class="container"> <img class="image" src="/upload/qa/20221223/20221223142084.jpg "> <div class="news"> <div class="title">標題文字標題文字標題文字標題文字</div> <div class="paragraph">段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字</div> </div> </div> </body> </html>
秋意濃走過傷悲只是朦朧惜醉顏 23小時前
方法:img的src填上有效的圖片地址或者.image的樣式加上flex-shrink:0.img的src填上有效地址:你的圖片地址失效將會顯示alt屬性的值,然后根據flex屬性,因為.news不夠位置顯示,會優先壓縮剩余空間.希望不被壓縮就添加flex-shrink:0樣式添加flex-shrink:0:我的博客
200839xy 23小時前
應該是flex的問題，也就是flex-grow + flex-shrink + flex-basisflex-grow 默認為0，而flex-shrink默認為1，而flex-basis默認是auto；就算不設置，.image的flex-shrink是默認為1的。經過測試 .image{flex：none；}就可以了。但是我也不知道為什么。不設置的話，就算父容器寬度可以容納字體，也還是會變窄，而且是刷新變窄，刷新變寬，我也很想知道是什么原因
