display:flex之后子元素宽度失效?

31 阅读1分钟

5c213ceebb8771d4450c142db931103.png

这里看到结构是

<view class="setListArr_li">
    <image class="" :src="item1.img" mode=""></image>
    <text class="">{{item1.name}}</text>
</view>

222265231ad70c5b70b30dc6e83147f.png

在setListArr_li设置了display:flex之后

子元素的标签内容,无论是图片还是文字超出指定宽度之后,width是会失效的。

解决方案:

子元素
flex-shrink:0

或者width改,min-width

最优:

会过宽的子元素设置宽度,text:width