包裹时，从柔性物品中删除边距 [英] Removing margin from flex items when they wrap

问题描述

以下是我的代码工作正常，除了最后一行是从 .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>

这篇关于包裹时，从柔性物品中删除边距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！