包裹柔性物品时去除边距

Question

以下是我的代码，它工作正常，除了margin-bottom: 5px;从.tagcss类添加的容器中的最后一行。

我面临的问题是标签列表是 动态的， 因此我无法直接定位到Item-13,14等。

让我知道在flex中，我们是否有特权在我的flex容器的最后一行添加自定义css wrt。

* {

    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>

Answer 1

大多数框架用来解决此问题的最常见方法是改为在项目（tag）上设置一个上边距，然后用对父项（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>

更好的方法可能是为所有项目的边分配相同的边距，尽管价值是一半。

* {

  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>