包装时从弹性项目中删除边距 [英] Removing margin from flex items when they wrap
本文介绍了包装时从弹性项目中删除边距的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
以下是我的代码，它工作正常，除了容器中的最后一行添加 margin-bottom: 5px; 来自 .tag css 类.>
我面临的问题是标签列表是动态，所以我不能直接定位 Item-13,14 等等.
让我知道在 flex 中我们是否有任何特权添加自定义 css w.r.t 在我的 flex 容器中的最后一行.
* {边距:0；填充:0；}html，正文{box-sizing: 边框框；}.容器 {宽度:600px；边距:0 自动；边距顶部:25px；边框:1px 实心；填充:5px；}.tags {列表样式类型:无；显示:弹性；弹性方向:行；flex-wrap: 包裹;justify-content: flex-start;}.标签 {填充:5px；背景色:#76FF03；边距:0 5px 5px；}<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> 解决方案
2021 年末更新
现在 gap 属性也适用于 Flexbox(在较新的浏览器版本上).
* {边距:0；填充:0；}html，正文{box-sizing: 边框框；}.容器 {宽度:600px；边距:0 自动；边距顶部:25px；边框:1px 实心；填充:5px；}.tags {列表样式类型:无；显示:弹性；弹性方向:行；flex-wrap: 包裹;justify-content: flex-start;间隙:5px；/* 添加 */}.标签 {填充:5px；背景色:#76FF03；/* 边距:0 5px 5px;删除 */}<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>旧版本
大多数框架用来解决这个问题的最常见方法是在项目上设置一个上边距(tag)，然后在项目父项上设置一个负边距(tag)来补偿它(标签)
* {边距:0；填充:0；}html，正文{box-sizing: 边框框；}.容器 {宽度:600px；边距:0 自动；边距顶部:25px；边框:1px 实心；填充:5px；}.tags {列表样式类型:无；显示:弹性；弹性方向:行；flex-wrap: 包裹;justify-content: flex-start;边距顶部:-5px；/* 补偿顶部 */}.标签 {填充:5px；背景色:#76FF03；边距:5px 5px 0 0；/* 右上 */}<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>更好的方法可能是为所有项目的边提供相同的边距，尽管值是一半.
* {边距:0；填充:0；}html，正文{box-sizing: 边框框；}.容器 {宽度:600px；边距:0 自动；边距顶部:25px；边框:1px 实心；填充:5px；}.tags {列表样式类型:无；显示:弹性；弹性方向:行；flex-wrap: 包裹;justify-content: flex-start;}.标签 {填充:5px；背景色:#76FF03；边距:2.5px；}<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>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>
解决方案
Update in late 2021
Now the gap property also works with Flexbox (on newer browser versions).
* {
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>
Older versions
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屋！
查看全文
