使用flex布局时,宽度超限,一行显示 ,图片缩小变形了,怎么解决?

1.问题:

在做微信小程序项目时,使用flex布局时,宽度超限时,一行显示 ,发现图片缩小变形了,在同事的帮助下解决了问题,现把解决方法记录下,以便之后查看。

在这里插入图片描述

2.解决方法:

flex布局下的元素使用flex-shrink属性
解决方法是:图片样式添加 flex-shrink:0;
在这里插入图片描述

3.flex-shrink

在这里插入图片描述

.flex-shrink具体是做什么的,请看如下介绍:

比如你设置了一个父元素400px,然后来了三个子元素,宽度分别200px。 那么加起来600px。我擦,这不脑残么? 超了怎么办?还有得救。flex-shrink 按比例压缩。

<style>
h1{font:bold 20px/1.5 georgia,simsun,sans-serif;}
#flex{display:-webkit-flex;display:flex;width:400px;margin:0;padding:0;list-style:none;}
#flex li{width:200px;}
#flex li:nth-child(1){background:#888;}
#flex li:nth-child(2){background:#ccc;}
#flex li:nth-child(3){-webkit-flex-shrink:3;flex-shrink:3;background:#aaa;}
</style>
</head>
<body>
<ul id="flex">
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>

上述代码中第三个li设置了flex-shrink属性为3,另外两个没设置,没设置默认1. 好。现在多戳200px。分成5份。
按比例压缩吧
a压缩200(1/5)=40px;
b同理40px;
c压缩200(3/5)=120px;
在这里插入图片描述
来自链接:https://www.jianshu.com/p/d6c48a51e086

相关推荐
©️2020 CSDN 皮肤主题: 1024 设计师:白松林 返回首页