Question

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

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

让我知道在flex中我们有权在我的flex容器的最后一行添加自定义css w.r.t。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

大多数框架用来解决这个问题的最常见的方法是在项目（tag）上设置一个上边距，然后在项目父项（{{1 }}）

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

Answer 2

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

但是，如果你对另一种CSS3技术 - 网格布局开放 - 解决方案简单，干净，简单。

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

那么你要做的是使用grid-gap来表示项目之间的间距。然后使用padding获取项目与容器之间的相同间距。

以下是此方法的一些好处：

消除了最后一行边距问题。物品数量不再是一个问题。

不需要黑客。

无需保证金。

您的商品在列中对齐（如果您想要的话）。

容器中的所有可用空间均匀分布在各个项目中（如果您想要的话）。

＆＃13;
＆＃13;
.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; }
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

jsFiddle demo

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

Answer 3

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

gap: 5px;

Answer 4

改为调整padding-bottom .tags。

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

像：

.tags {
  padding: 5px 0 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;
  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>

希望这有帮助！

Answer 5

使用此

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

＆＃13;

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

＆＃13;

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

＆＃13;

包裹

5 个答案:

jsFiddle demo