css 去掉列表中每一行最后一个元素的外边距或属性

css 去掉列表中每一行最后一个元素的外边距或属性

设定外框的宽度为180px
内部的每个tag宽度34px右边距为12px并列排列后，一行够排列3个
我们计算一下剩余的宽度：
180-(34+12)*3 = 42
最终得出剩余宽度为42很显然，其实如果最右边的tag的右边距为空，他就可以变成4个一排了
看一下我们现在的代码：

<div class="content">
	<span class="tag">内容</span>
	<span class="tag">内容</span>
	<span class="tag">内容</span>
	<span class="tag">内容</span>
	<span class="tag">内容</span>
	<span class="tag">内容</span>
	<span class="tag">内容</span>
	<span class="tag">内容</span>
	<span class="tag">内容</span>
</div>

.content{
    margin-top: 50px;
    margin-left: 50px;
    width: 180px;
    border:1px solid red;
    display: flex;
    flex-wrap: wrap;
}
.tag{
    width: 34px;
    height: 40px;
    margin-bottom: 10px;
    margin-right: 12px;
    background-color:yellow;
}

我这里提供一个解决的思路，就是在中间加一层用来撑开宽度的div，先看看效果实现

可以看到多了一个边框为蓝色的块，并且，排列变成了4个一排，来看一下代码

<div class="content">
    <div class="blocks">
        <span class="tag">内容</span>
        <span class="tag">内容</span>
        <span class="tag">内容</span>
        <span class="tag">内容</span>
        <span class="tag">内容</span>
        <span class="tag">内容</span>
        <span class="tag">内容</span>
        <span class="tag">内容</span>
        <span class="tag">内容</span>
    </div>
</div>

.content{
    margin-top: 50px;
    margin-left: 50px;
    width: 180px;
    border:1px solid red;
}
.tag{
    width: 34px;
    height: 40px;
    margin-bottom: 10px;
    margin-right: 12px;
    background-color:yellow;
}
.blocks{
    width: calc(100% + 12px);
    display: flex;
    flex-wrap: wrap;
    border:1px solid blue;
}

多加了一个blocks的块，并且弹性布局也移动了进去(为了正常展示排列换行)
最主要的是使用width: calc(100% + 12px)来设置宽度，多层开了12px（就是每个tag的右边距）

这样就完美达到了效果
如果我们将右边距改成对应的左边距，就可以实现，每次换行之后，第一个tag永远是贴紧最左边的

...
.tag{
    width: 34px;
    height: 40px;
    margin-bottom: 10px;
    margin-left: 12px;
    background-color:yellow;
}
.blocks{
    width: calc(100% + 12px);
    margin-left: -12px;
    display: flex;
    flex-wrap: wrap;
    border:1px solid blue;
}

第一次发现这种方法，感觉特别神奇，哈哈哈，这可能就是一种技巧了