flex布局下关于padding导致视图容器塌陷的解决方案


在flex布局下,不可直接将padding值如同margin一样设置:

??这是不正确的写法

.box{
     box-sizing: border-box;
     padding: 0 40rpx;
     margin: 0 auto;
}

解读:开发者本意是想将box左右居中显示,但是这样会导致box右边无法居中,根源在于使用了padding: 0 40rpx;

??正确示范

.box{
     box-sizing: border-box;
     //如果想左右都有padding,需要分开写
      padding-left:40rpx;
      paading-right:40rpx;
     margin: 0 auto;
}

不知道原因,但是这样的确可以解决塌陷问题。

**我也有一脑袋的小问号 **