下面代码，flex自适应布局，但是图片宽度变窄了而不是文字的宽度变窄，我测试过是文字影响了导致没法自？_问答_优艾设计网

下面代码，flex自适应布局，但是图片宽度变窄了而不是文字的宽度变窄，我测试过是文字影响了导致没法自？

优艾设计网 https://www.uibq.com 2023-06-17 07:21 出处：网络作者：PS教程自学

<!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\"> <title>Document</title> <style>body{margin:0px;}.container{ display:优艾设计网_设计客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；}就可以了。但是我也不知道为什么。不设置的话，就算父容器宽度可以容纳字体，也还是会变窄，而且是刷新变窄，刷新变宽，我也很想知道是什么原因