flex布局自动换行并解决最后一行两侧对齐
在开发中遇到使用弹性布局需要换行的情况,解决记录,以免忘记
<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; }