div换行确保每一行头跟尾的diy都贴近边边-优快云博客

要实现这么一个效果

样式嘛就不贴了，讲讲思路得了

为了确保横向

<div style="display: flex;flex-wrap: wrap;justify-content: space-between;">
    <div for></div>
</div>

第一行css确保for循环的div能横向走，for里的div根据屏幕大小选择，如果间隔比div小可以不用给间距，如果间距比div小，那么就无法产生3个同一行的情况，则需要给间距。那么就会产生一个问题：div需要贴住屏幕边边，给左间距会导致左边不贴边，右同理，要处理这个问题就需要放弃margin：20px改用gap:20px。

处理到这里，那么看看效果？

新的问题来了，最后一个div因为要执行justify-content: space-between;导致一定会是分开两边，那么要怎么解决呢，我们新增一个命名

<div class="flex-container" style="display: flex;flex-wrap: wrap;justify-content: space-between;">
    <div for></div>
</div>

然后输入以下css

	.flex-container::after {
		content: '';
		width: calc(180px);
        /*如果宽度不确定的情况下也可以使用flex:auto**/
	}

最终效果就是