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

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

写回答
好问题 0 提建议
追加酬金
关注问题
分享
邀请回答
编辑收藏删除
收藏举报

2条回答默认最新

CSDN专家-showbo 2021-12-14 14:38

关注

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