每次换行之后都会留下一个大空白区域,有没有什么方法可以弥补这个缺点?
可以用百分比,item定定宽的话容器宽度要为6*每个项的宽度(需要加上空白边)
示例如下
<!doctype html>
<style>
.flexbox{display:flex;margin:0 auto;width:1280px;flex-wrap:wrap}
.flexbox .item{width:16.66%;height:100px;box-sizing:border-box;background:#ccc;border-right:solid 1px #f00;border-bottom:solid 1px #f00}
</style>
<div class="flexbox">
<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 class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
宽度不够