用了flex布局和overflow之后右边距失效解决办法

本文主要是介绍用了flex布局和overflow之后右边距失效解决办法，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

场景

项目中自己写一个轮播图，使用display:flext布局和oveflow-x:scroll等属性设置后，右边距失效了（仅在移动端）

解决办法

为div添加伪元素

 .swiperWrapper  ::after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden; //占位但不可见
  }

   .swiperWrapper {
        // background: yellow;
        display: flex;
        justify-content: flex-start;
        position: relative;
        width: 100%;
        height: 100%;
        padding-left: 15px;
        margin-right: 5px;
        padding-bottom: 60px;// 滚动条向下移，外层盒子给定高overflow:hidden，解决ios无法隐藏滚动条问题
        box-sizing: border-box;
        overflow-x: scroll;

这篇关于用了flex布局和overflow之后右边距失效解决办法的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！