Flex 布局下子元素宽度大于父元素时不会自动缩放
在将一段 HTML 代码迁移到小程序版本的过程中发现如下问题:
这是 HTML 中的图片在普通浏览器中的情况:
这是解析为 WXML 后在小程序的情况:
对比发现,这两张图片所在的父元素为 Flex 布局,justify-content 为 space-between;。
在普通浏览器下,当 justify-content 为 space-between; 时,当子元素宽度超过父元素时,子元素会自动缩小。
而在小程序中,子元素不会缩小,还会溢出。溢出的方向取决于 justify-content 的值。
< view style = "display: flex;justify-content: space-between;" > < view style = "width: 500px;max-width: 100%;" > < image src = "./1.jpg" style = "width: 500rpx;max-width: 100%;" /> </ view > < view style = "width: 500px;max-width: 100%;" > < image src = "./1.jpg" style = "width: 500rpx;max-width: 100%;" /> </ view > </ view > |