有以下场景
<style>
.wrapper {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
width: 600px;
background-color: #aff;
}
.item {
width: 110px;
height: 110px;
background-color: #faa;
}
</style>
</head>
<body>
<div class="wrapper">
<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>
</body>
效果如下
这样的样子很丑
解决方案
方法一
可以使用计算宽度来解决：假设容器的宽度是600px,每个项目的宽度是110px,每行可以显示5个，剩余宽度= 600px-110×50px = 50,因为每行最多可以显示5个，50/5 = 10,给每个项目的margin–right设置10px，最后一个不设置（div:nth-child(5n) {margin-right:0}）即可
方法二
部分代码
<style>
.wrapper > i {
width: 110px; /*宽度要和每个项目的宽度一样*/
}
</style>
</head>
<body>
<div class="wrapper">
<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>
<i></i><i></i><i></i>
</div>
</body>
原理
因为一个元素设置里flex，里面的元素就不严格区分块级或行内及了，所以可以设置宽高。我们未每个i元素设置和item一样的宽度，但是高度是0，所以我们看不见，也不会影响布局，当第二行只有1个的时候，不会影响，默认靠边界，当第二行有2、3、4个的时候那么就剩下3、2、1个元素需要补位，正好我们添加了3个i元素.
到底加几个i元素
i元素的个数 = 列数 - 2 （-1也行，但是少个元素总是少点代码）
原理其实很简单，因为第二行缺几个我们就补上几个元素,这样就能和上一行一样显示了。
为啥要减去2呢，假如第二行只有一个元素的情况下，justify-content：space-between就会贴边靠齐，没有影响
为了更加直观的感受到，当给i元素设置高度和背景效果如下，（注意，当i元元素的高度是0的时候不会影响布局，我们也看不到，这里用i元素是因为短，可以用别的元素）
原文地址:https://blog.csdn.net/qq_51558433/article/details/125668960
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.7code.cn/show_16465.html
如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！
