下面代码，flex自适应布局，但是图片宽度变窄了而不是文字的宽度变窄，我测试过是文字影响了导致没法自？
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style>body{margin:0px;}.container{ 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>
秋意浓走过伤悲只是朦胧惜醉颜优艾设计网_设计百科 19小时前
方法:img的src填上有效的图片地址或者.image的样式加上flex-shrink:0.img的src填上有效地址:你的图片地址失效将会显示alt属性的值,然后根据flex属性,因为.news不够位置显示,会优先压缩剩余空间.希望不被压缩就添加flex-shrink:0样式添加flex-shrink:0:我的博客
200839xy 19小时前 优艾设计网_PS论坛
应该是flex的问题，也就是flex-grow + flex-shrink + flex-basisflex-grow 默认为0，而flex-shrink默认为1，而flex-basis默认是auto；就算不设置，.image的flex-shrink是默认为1的。经过测试 .image{flex：none；}就可以了。但是我也不知道为什么。不设置的话，就算父容器宽度可以容纳字体，也还是会变窄，而且是刷新变窄，刷新变宽，我也很想知道是什么原因
加载中,请稍侯......
精彩评论