微信小程序flex布局加<image />标签，使用mode="heightFix"时，布局闪烁

1. 代码

• 正常情况，两个图片的高度一致，宽度也一致，这时候没有什么问题

<view class="container">
	<image class="icon" src="1.png" alt="" />
	<image class="icon" src="2.png" alt="" />
</view>

.container {
	display: flex;
	justify-content: space-evenly;
}

.container .icon {
	width: 50px;
	height: 50px;
}

• 特殊情况，第二个图片的宽度窄一些，此时只能单独去指定它的宽度，因为小程序的图片宽度不写，默认不会保持宽高比自适应

<view class="container">
	<image class="icon" src="1.png" alt="" />
	<image class="icon" src="2.png" style="width: 40px" alt="" />/*内联样式或者用css选择器设置样式*/
</view>

.container {
	display: flex;
	justify-content: space-evenly;
}

.container .icon {
	width: 50px;
	height: 50px;
}

• 如果此时用了mode="heightFix"，则会自动根据高度来修正宽度，但是由于元素的父元素是flex布局，flex-direction刚好是row，此时宽度自适应会闪烁一下，可以看到两个图片是从两侧向中间靠拢，然后停住的，如果此时给image元素的样式加上transition属性，则效果更加明显。

<view class="container">
	<image class="icon" src="1.png" mode="heightFix" alt="" />
	<image class="icon" src="2.png" mode="heightFix" alt="" />
</view>

.container {
	display: flex;
	justify-content: space-evenly;
}

.container .icon {
	height: 50px; /*此时不用指定宽度了*/
	/*如果此时给image元素的样式加上transition属性，则效果更加明显。*/
	// transition: width 2s;
}

• 如果此时父元素的flex-direction是column，子元素image的mode="widthFix"的话，效果也是一样的，屏幕刷新率越低，效果越明显，反之则不明显，但仍会闪烁。
• 另一种解决办法，高度和宽度都要指定，即使使用了heightFix来修正宽度，此时可设置widh: auto;