flex布局⾃动换⾏并解决最后⼀⾏两侧对齐在开发中遇到使⽤弹性布局需要换⾏的情况,解决记录,以免忘记
<div class="bankproduce">
<div class="bankproduce_content"></div>
<div class="bankproduce_content"></div>
<div class="bankproduce_content"></div>
.......
</div>
.bankproduce{
flex布局对齐方式
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;
}

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。