HTML的flex盒子左对齐的方式怎么让盒子里面的子元素铺满屏幕,不是两端对齐和居中对齐的那种

img

每次换行之后都会留下一个大空白区域,有没有什么方法可以弥补这个缺点?

可以用百分比,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>

宽度不够