美文网首页
flex 设置space-between,右边不靠边。

flex 设置space-between,右边不靠边。

作者: c6e71129966d | 来源:发表于2021-09-06 13:43 被阅读0次

    1.最外层父元素设置为弹性布局,子元素设置为 display:inline-block。

    2.子元素的第二级的div根据条件判断是否显示(display:none)。

    导致的问题:设置space-between.每一行的最后一个子元素距离最右边有一定的宽度。

    原因:当内部元素(第2步)不显示的时候,子元素(第一步里的)应该也设置为display:none。

    .father{

        display:flex;

        flex-wrap: wrap;

        justify-content: space-between;

        width:1000px

    }

    问题二:

    flex布局,设置折行,总共有五个,如果设置为一行三个,第二行(最后一行)展示不好看。

    解决办法:

    .father::after{}

        content:"";

        width:'' //  子元素的宽度 

        height:0;

        display:block;

    }

    相关文章

      网友评论

          本文标题:flex 设置space-between,右边不靠边。

          本文链接:https://www.haomeiwen.com/subject/xzvewltx.html