本文介绍了包裹时，从柔性物品中删除边距的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
以下是我的代码工作正常，除了最后一行是从 .tag添加 margin-bottom：5px;
我正面临的问题是标签列表是动态的，所以我不能直接定位Item- 13,14等等等等。
让我知道在flex中我们是否有任何权限添加自定义CSS在我的柔性容器中的最后一行。
* {margin：0; padding：0;} html，body {box-sizing：border-box;}。container {width：600px;保证金：0汽车; margin-top：25px; border：1px solid; padding：5px;}。tags {list-style-type：none;显示：flex; flex-direction：row; flex-wrap：wrap; justify-content：flex-start;}。tag {padding：5px;背景颜色：＃76FF03; margin：0 5px 5px;} < div class = 容器 > < ul class =tags> < li class =tag item-1>标签项目1< / li> < li class =tag item-2>标签项目2< / li> < li class =tag item-3>标签项目3< / li> < li class =tag item-4>标签项目4< / li> < li class =tag item-5>标签项目5< / li> < li class =tag item-6>标签项目6< / li> < li class =tag item-7>标签项目7< / li> < li class =tag item-8>标签项目8< / li> < li class =tag item-9>标签项目9< / li> < li class =tag item-10>标签项目10< / li> < li class =tag item-11>标签项目11< / li> < li class =tag item-12>标签项目12< / li> < li class =tag item-13>标签项目13< / li> < li class =tag item-14>标签项目14< / li> < li class =tag item-15>标签项目15< / li> < li class =tag item-16>标签项目16< / li> < / ul>< / div>
大多数框架用来解决这个问题的最常用的方式是在项目（ tag ）上设置一个上边距，然后进行补偿（ tags ）
* {margin：0; padding：0;} html，body {box-sizing：border-box;}。container {width：600px;保证金：0汽车; margin-top：25px; border：1px solid; padding：5px;}。tags {list-style-type：none;显示：flex; flex-direction：row; flex-wrap：wrap; justify-content：flex-start; margin-top：-5px; / *补偿顶部* /}标签{padding：5px;背景颜色：＃76FF03; margin：5px 5px 0 0; / * top，right * /}
< div class = 容器 > < ul class =tags> < li class =tag item-1>标签项目1< / li> < li class =tag item-2>标签项目2< / li> < li class =tag item-3>标签项目3< / li> < li class =tag item-4>标签项目4< / li> < li class =tag item-5>标签项目5< / li> < li class =tag item-6>标签项目6< / li> < li class =tag item-7>标签项目7< / li> < li class =tag item-8>标签项目8< / li> < li class =tag item-9>标签项目9< / li> < li class =tag item-10>标签项目10< / li> < li class =tag item-11>标签项目11< / li> < li class =tag item-12>标签项目12< / li> < li class =tag item-13>标签项目13< / li> < li class =tag item-14>标签项目14< / li> < li class =tag item-15>标签项目15< / li> < li class =tag item-16>标签项目16< / li> < / div>
$ b
另外一个更好的办法是给所有项目边上的保证金，但是价值的一半。 data-hide =falsedata-console =truedata-babel =false>
* {margin：0; padding：0;} html，body {box-sizing：border-box;}。container {width：600px;保证金：0汽车; margin-top：25px; border：1px solid; padding：5px;}。tags {list-style-type：none;显示：flex; flex-direction：row; flex-wrap：wrap; justify-content：flex-start;}。tag {padding：5px;背景颜色：＃76FF03; margin：2.5px;}
< div class =容器> < ul class =tags> < li class =tag item-1>标签项目1< / li> < li class =tag item-2>标签项目2< / li> < li class =tag item-3>标签项目3< / li> < li class =tag item-4>标签项目4< / li> < li class =tag item-5>标签项目5< / li> < li class =tag item-6>标签项目6< / li> < li class =tag item-7>标签项目7< / li> < li class =tag item-8>标签项目8< / li> < li class =tag item-9>标签项目9< / li> < li class =tag item-10>标签项目10< / li> < li class =tag item-11>标签项目11< / li> < li class =tag item-12>标签项目12< / li> < li class =tag item-13>标签项目13< / li> < li class =tag item-14>标签项目14< / li> < li class =tag item-15>标签项目15< / li> < li class =tag item-16>标签项目16< / li> < / div>
Following is my code which is working fine, except the last line in a container which is adding margin-bottom: 5px; from .tag css class.
Problem I am facing is the tag list is dynamic so I cannot directly target the Item-13,14 and so on and so forth.
Let me know in flex do we have any privilege to add custom css w.r.t the last row in my flex container.
* {
margin: 0;
padding: 0;
}
html, body {
box-sizing: border-box;
}
.container {
width: 600px;
margin: 0 auto;
margin-top: 25px;
border: 1px solid;
padding: 5px;
}
.tags {
list-style-type: none;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
}
.tag {
padding: 5px;
background-color: #76FF03;
margin: 0 5px 5px;
}
<div class="container">
<ul class="tags">
<li class="tag item-1">Tag Item 1</li>
<li class="tag item-2">Tag Item 2</li>
<li class="tag item-3">Tag Item 3</li>
<li class="tag item-4">Tag Item 4</li>
<li class="tag item-5">Tag Item 5</li>
<li class="tag item-6">Tag Item 6</li>
<li class="tag item-7">Tag Item 7</li>
<li class="tag item-8">Tag Item 8</li>
<li class="tag item-9">Tag Item 9</li>
<li class="tag item-10">Tag Item 10</li>
<li class="tag item-11">Tag Item 11</li>
<li class="tag item-12">Tag Item 12</li>
<li class="tag item-13">Tag Item 13</li>
<li class="tag item-14">Tag Item 14</li>
<li class="tag item-15">Tag Item 15</li>
<li class="tag item-16">Tag Item 16</li>
</ul>
</div>
解决方案
The most common way, which most framework use to solve that, is to set a top margin on the items (tag) instead, and then compensate that with a negative margin on the items parent (tags)
* {
margin: 0;
padding: 0;
}
html, body {
box-sizing: border-box;
}
.container {
width: 600px;
margin: 0 auto;
margin-top: 25px;
border: 1px solid;
padding: 5px;
}
.tags {
list-style-type: none;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
margin-top: -5px; /* compensate top */
}
.tag {
padding: 5px;
background-color: #76FF03;
margin: 5px 5px 0 0; /* top, right */
}
<div class="container">
<ul class="tags">
<li class="tag item-1">Tag Item 1</li>
<li class="tag item-2">Tag Item 2</li>
<li class="tag item-3">Tag Item 3</li>
<li class="tag item-4">Tag Item 4</li>
<li class="tag item-5">Tag Item 5</li>
<li class="tag item-6">Tag Item 6</li>
<li class="tag item-7">Tag Item 7</li>
<li class="tag item-8">Tag Item 8</li>
<li class="tag item-9">Tag Item 9</li>
<li class="tag item-10">Tag Item 10</li>
<li class="tag item-11">Tag Item 11</li>
<li class="tag item-12">Tag Item 12</li>
<li class="tag item-13">Tag Item 13</li>
<li class="tag item-14">Tag Item 14</li>
<li class="tag item-15">Tag Item 15</li>
<li class="tag item-16">Tag Item 16</li>
</ul>
</div>
And an even better way might be to give the same margin to all item's sides, though half the value.
* {
margin: 0;
padding: 0;
}
html, body {
box-sizing: border-box;
}
.container {
width: 600px;
margin: 0 auto;
margin-top: 25px;
border: 1px solid;
padding: 5px;
}
.tags {
list-style-type: none;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
}
.tag {
padding: 5px;
background-color: #76FF03;
margin: 2.5px;
}
<div class="container">
<ul class="tags">
<li class="tag item-1">Tag Item 1</li>
<li class="tag item-2">Tag Item 2</li>
<li class="tag item-3">Tag Item 3</li>
<li class="tag item-4">Tag Item 4</li>
<li class="tag item-5">Tag Item 5</li>
<li class="tag item-6">Tag Item 6</li>
<li class="tag item-7">Tag Item 7</li>
<li class="tag item-8">Tag Item 8</li>
<li class="tag item-9">Tag Item 9</li>
<li class="tag item-10">Tag Item 10</li>
<li class="tag item-11">Tag Item 11</li>
<li class="tag item-12">Tag Item 12</li>
<li class="tag item-13">Tag Item 13</li>
<li class="tag item-14">Tag Item 14</li>
<li class="tag item-15">Tag Item 15</li>
<li class="tag item-16">Tag Item 16</li>
</ul>
</div>
这篇关于包裹时，从柔性物品中删除边距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！
