绝对定位的盒子使用flex产生width不理想的解决方法

在项目中,tabbar组件的盒子一般时固定的,必然会用到position:fixed这个样式。
如果对于要固定的盒子中,使用fixed固定会产生,width不是你想要的结果。
我想要的结果时左右边距都是32.
情况一:(width为100%)
绝对定位的盒子使用flex产生width不理想的解决方法
绝对定位的盒子使用flex产生width不理想的解决方法

绝对定位的盒子使用flex产生width不理想的解决方法
情况二:(去掉width100%,左右边距不对称)
绝对定位的盒子使用flex产生width不理想的解决方法
绝对定位的盒子使用flex产生width不理想的解决方法
要解决这个问题,我们可以在盒子外面在再一个盒子,并且position的样式写在在外面的盒子。代码如下:
绝对定位的盒子使用flex产生width不理想的解决方法
绝对定位的盒子使用flex产生width不理想的解决方法
最后就可以实现:左右边距相等
绝对定位的盒子使用flex产生width不理想的解决方法