uniapp 微信小程序 justify-content和position: fixed/absolute冲突 justify-content没生效

                <cover-view class="bottom-view-inter" style="">
                    <cover-view class="buttom-view-icon-button"  @click="moveTolocation">
                        <cover-image src="/static/map/location.png" style="width:64rpx;height:64rpx;padding:5rpx;"></cover-image>
                    </cover-view>
                    <cover-view class="bottom-view-button" style="">
                       
                    </cover-view>
                    <cover-view class="buttom-view-icon-button"  @click="moveTolocation">
                        <cover-image src="/static/map/location.png" style="width:64rpx;height:64rpx;padding:5rpx;"></cover-image>
                    </cover-view>
                </cover-view>

.bottom-view-inter {
    position: fixed;
    bottom:75rpx;
    width: 100%;
    display:flex;
    align-items: center;
    justify-content: space-around;
}

效果如下：

我们可以发现弹性盒布局已经失效了，那么我们如何解决这个问题呢？
其实很简单，只需要在cover-view的外面再套一个盒子就可以了。然后外层盒子使用定位，内层盒子正常使用弹性盒布局。

HTML改变后的代码为：

                <cover-view class="bottom-view-outer" style="">
                    <cover-view class="bottom-view-inter" style="">
                        <cover-view class="buttom-view-icon-button"  @click="moveTolocation">
                            <cover-image src="/static/map/location.png" style="width:64rpx;height:64rpx;padding:5rpx;"></cover-image>
                        </cover-view>
                        <cover-view class="bottom-view-button" style="">
                           
                        </cover-view>
                        <cover-view class="buttom-view-icon-button"  @click="moveTolocation">
                            <cover-image src="/static/map/location.png" style="width:64rpx;height:64rpx;padding:5rpx;"></cover-image>
                        </cover-view>
                    </cover-view>
                </cover-view>

CSS改变后的代码为：

.bottom-view-outer {
    position: fixed;
    bottom:75rpx;
    width: 100%;
}
.bottom-view-inter {
    display:flex;
    align-items: center;
    justify-content: space-around;
}

这时候我们发现问题解决了！