以下是我的代码,它运行良好,除了容器中的最后一行添加 margin-bottom: 5px;
来自 .tag
css 类。
我面临的问题是标签列表是动态,所以我无法直接定位 Item-13、14 等等。
让我知道在 flex 中我们是否有权在我的 flex 容器的最后一行添加自定义 css。
* {
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>
最佳答案
2021 年底更新
现在 gap
属性也适用于 Flexbox(在较新的浏览器版本上)。
* {
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;
gap: 5px; /* added */
}
.tag {
padding: 5px;
background-color: #76FF03;
/* margin: 0 5px 5px; removed */
}
<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
) 上设置一个上边距,然后用父元素的负边距来补偿它 ( 标签
)
* {
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>
更好的方法可能是为所有元素的边提供相同的边距,尽管值(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>
关于html - 在 flex 元素换行时移除边距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56629065/