包装时从弹性项目中删除边距答案

【问题标题】：Removing margin from flex items when they wrap包装时从弹性项目中删除边距
【发布时间】：2018-03-27 16:37:06
【问题描述】：

以下是我运行良好的代码，除了容器中的最后一行从.tag css 类添加margin-bottom: 5px;。

我面临的问题是标签列表是动态的，所以我不能直接针对 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>

【问题讨论】：

使用ul.tags > li:last-child {margin-bottom: 0}
您始终可以使用 CSS 选择器 :last-child 或 :last-of-type
你可以试试这个li.tag:nth-child(12) ~ li.tag { margin-bottom: 0; }。也就是说，所有 li 元素具有 .tag 类，从第 12 个孩子开始。
@Krusader the tag list is dynamic
@Morpheus 它将从最后一个元素中删除边距底部，而不是从行底部的所有堆叠元素中删除，即。在这种情况下第 13 项、第 14 项、第 15 项和第 16 项，只有第 16 项会受到 last-child 的影响

标签： html css flexbox

【解决方案1】：

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)，然后在项目父项上使用负边距 (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>

【讨论】：

看起来有点奇怪的是负边距对父级的影响。我会假设负边距意味着整个 div 会向上移动，相反它似乎作用于内部空间，即父 div 和子 div 之间的空间
@testndtv 整个元素（设置了边距）确实向上移动。在我的第一个示例中，ul 和 tags 类在 div 内向上移动。给它添加一个边框，你就会看到它是如何工作的。

【解决方案2】：

正如another answer 中提到的，许多框架使用的解决这个问题的常用方法是应用负边距和填充组合。甚至 flexbox 也没有提供干净的解决方案。在这种情况下，丑陋的黑客行为是常态。

但是，如果您愿意接受另一种 CSS3 技术 - 网格布局 - 解决方案是简单、干净和容易的。

CSS Grid 提供了grid-column-gap 和grid-row-gap 属性。两者的简写都是grid-gap。这些属性允许您在网格项目之间创建空间。但它们从不适用于物品和容器之间的空间。同样，它们只在项目之间工作（即排水沟）。

所以你要做的是使用grid-gap 来设置项目之间的间距。然后使用padding 使项目和容器之间的间距相同。

这里只是这种方法的一些好处：

最后一行边距问题已消除。商品数量不再是问题。
无需破解。
不需要边距。
您的项目在列中对齐（如果这是您想要的）。
容器中的所有可用空间平均分配给项目（如果这是您想要的）。

.container {
  width: 600px;
  margin: 0 auto;
  margin-top: 25px;
  border: 1px solid;
  padding: 5px;
}

.tags {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  grid-gap: 5px;
  list-style-type: none;
}

.tag {
  padding: 5px;
  background-color: #76FF03;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

<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>

jsFiddle demo

规格参考：https://www.w3.org/TR/css3-grid-layout/#gutters

【讨论】：

CSS 工作组has recently decided 也将gap 属性添加到Flexbox（使*-gap 属性不再特定于网格）。但我还没有听说有任何浏览器采用这种方式。

【解决方案3】：

现在您可以使用 gap 属性了！行间距不会应用在最后一行的底部。

gap: 5px;

【讨论】：

【解决方案4】：

将padding-bottom 改为.tags。

因为你永远不知道列表底部会出现多少个标签（这个解决方案非常灵活），

喜欢：

.tags {
  padding: 5px 0 0;
}

看看下面的sn-p：

* {
	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;
  padding: 5px 0 0;
}

.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>

希望这会有所帮助！

【讨论】：

【解决方案5】：

我知道这已经有好几年了，但我认为最好的方法是使用 line-height CSS 属性。

https://developer.mozilla.org/en-US/docs/Web/CSS/line-height

【讨论】：

【解决方案6】：

使用这个

li.tag:nth-last-child(-n+4) {
    margin-bottom: 0;
}

* {
	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;
}

li.tag:nth-last-child(-n+4) {
    margin-bottom: 0;
}

<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>

【讨论】：

最后一行有 5 或 6 条肯定会失败