以下是我的代码,它工作正常,除了margin-bottom: 5px;从.tagcss类添加的容器中的最后一行。
margin-bottom: 5px;
.tag
我面临的问题是标签列表是 动态的, 因此我无法直接定位到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>
大多数框架用来解决此问题的最常见方法是改为在项目(tag)上设置一个上边距,然后用对父项(tags)的一个负边距进行补偿
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>