在flex布局下，确定每行显示个数，模块宽度一样，最后一行模块个数不确定，模块左对齐，并且每个模块的间隔相同。
效果：
image
HTML:
<div class="box">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
CSS:
.box{display:flex;flex-wrap: wrap;padding:0 2%;box-sizing:border-box;}
.box .item{height:100px;background:#d00;margin-bottom:2%;flex:0 0 23.5%;margin-right:2%;}
.box .item:nth-of-type(4n){margin-right:0;}
一行显示模块的宽度+模块之间的间隔宽度为100%。
网友评论