首页 > 其他 > 详细

flex布局自动换行并解决最后一行两侧对齐

时间:2020-05-28 17:35:15      阅读:1066      评论:0      收藏:0      [点我收藏+]

在开发中遇到使用弹性布局需要换行的情况,解决记录,以免忘记

<div class="bankproduce">
      <div class="bankproduce_content"></div>
      <div class="bankproduce_content"></div>
      <div class="bankproduce_content"></div>
       .......
</div>
.bankproduce{
    width: 100%;
    height: 1072px;
    display: flex;
    flex-direction: row;
    //两侧对齐
    justify-content:space-between;
    //自动换行
    flex-wrap: wrap;
    //清除上下行的中间空隙
    align-content: flex-start;
}
.bankproduce_content{
    height: 486px;
    //---
    flex: 0 0 31%;
    margin-right: 15px;
    margin-left: 15px;
    margin-bottom: 40px;
    background: #ff6654;
}
//解决最后一行的问题
.bankproduce:after{
    content: ‘‘;
    width: 30%;
    border:1px solid transparent;
  }

 

flex布局自动换行并解决最后一行两侧对齐

原文:https://www.cnblogs.com/cyh-blogs/p/12981891.html

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