webentwicklung-frage-antwort-db.com.de

Entfernen des Randes von flexiblen Gegenständen beim Wickeln

Der folgende Code funktioniert gut, mit Ausnahme der letzten Zeile in einem Container, der margin-bottom: 5px; aus der .tag css-Klasse hinzufügt.

Problem, vor dem ich stehe, ist die Tag-Liste ist dynamisch , so dass ich das Item-13,14 nicht direkt anvisieren kann und so weiter und so fort.

Lassen Sie mich in flex wissen, ob wir die Berechtigung haben, benutzerdefinierte css w.r.t in der letzten Zeile in meinem flex-Container hinzuzufügen. 

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

7
Nesh

Der häufigste Weg, den die meisten Frameworks verwenden, um das zu lösen, besteht darin, stattdessen einen oberen Rand für die Elemente festzulegen (tag) und diesen dann mit einem negativen Rand für die übergeordneten Elemente (tags) zu kompensieren.

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


Ein noch besserer Weg könnte sein, allen Seiten des Artikels den gleichen Rand zu geben, allerdings nur den halben Wert.

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

5
LGSon

Wie in einer anderen Antwort erwähnt, besteht der übliche Weg zur Lösung dieses Problems, das von vielen Frameworks verwendet wird, darin, negative Margin- und Padding-Kombinationen anzuwenden. Selbst die Flexbox bietet keine saubere Lösung. Hässliche Hacks sind in dieser Situation die Norm.

Wenn Sie jedoch für eine andere CSS3-Technologie - Grid Layout - offen sind, ist die Lösung einfach, sauber und einfach.

Das CSS-Grid stellt die Eigenschaften grid-column-gap und grid-row-gap bereit. Die Abkürzung für beide lautet grid-gap. Mit diesen Eigenschaften können Sie Leerzeichen zwischen Gitterelementen erstellen. Sie gelten jedoch niemals für den Abstand zwischen Objekten und dem Container. Sie funktionieren wiederum nur zwischen Elementen (d. H. Den Rinnen).

Sie würden also grid-gap für den Abstand zwischen den Elementen verwenden. Verwenden Sie dann padding für den gleichen Abstand zwischen den Elementen und dem Container.

Hier sind nur einige Vorteile dieser Methode:

  • Das letzte Zeilenrandproblem wurde behoben. Die Anzahl der Artikel ist kein Problem mehr.
  • Keine Notwendigkeit für Hacks.
  • Keine Margen nötig.
  • Ihre Artikel werden in Spalten ausgerichtet (wenn Sie etwas möchten).
  • Der gesamte freie Speicherplatz im Container wird gleichmäßig auf die Elemente verteilt (falls gewünscht).

.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

Spezifikationsreferenz: https://www.w3.org/TR/css3-grid-layout/#gutters

6
Michael_B

Passen Sie stattdessen den padding-bottom für .tags an.

Da Sie nie wissen, wie viele Tags im unteren Teil der Liste angezeigt werden (diese Lösung ist sehr flexibel),

Mögen:

.tags {
  padding: 5px 0 0;
}

Schauen Sie sich den folgenden Ausschnitt an:

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

Hoffe das hilft!

1
Saurav Rastogi

benutze das

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>

0
Hiren Vaghasiya