flex布局 justify-content：space-between; 解决最后一排数量不够自动向两端排列问题和flex布局的元素会有默认间隙（垂直间隙）

1 .flex 布局两端对齐当最后一排数量不够时，会出现以下布局情况

实现效果：

解决方案：使用after伪类, 解决最后一排数量不够两端分布的情况。宽度就是每张图片的宽度

.list:after {

    content: "";

    width: 1.87rem;

 }

2.flex布局的元素会有默认间隙（垂直间隙）

效果图：

解决方案：使用align-content:flex-start解决

附上所有有关代码参考：

.list {

        width: 100%;

        display: flex;

        justify-content: space-between;

        flex-flow: row wrap;

        margin: 0 0.53rem;

        padding-bottom: 0.67rem;

        align-content: flex-start; // 解决flex布局的元素会有默认间隙（垂直间隙）

        li {

          img {

            width: 1.87rem;

            height: 1.87rem;

            margin-top: 0.67rem;

          }

        }

      }

      .list:after {

        content: "";

        width: 1.87rem;

      }

}

巴特西

flex布局 justify-content：space-between; 解决最后一排数量不够自动向两端排列问题和flex布局的元素会有默认间隙（垂直间隙）

最新文章

热门文章