首页 > 其他 > 详细

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

时间:2019-10-14 11:38:51      阅读:906      评论:0      收藏:0      [点我收藏+]

 

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布局的元素会有默认间隙(垂直间隙)

原文:https://www.cnblogs.com/Awen71815iou/p/11670228.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!