mitmario.dev

Abschnitt 9 · Lektion 5

Abstände mit gap

CSS Im Browser 2 Min Lesezeit 3 BeispieleLektion 5 von 9

Abstände zwischen Flex-Items lassen sich mit margin bauen. Das funktioniert, und es hat einen Haken, den du erst am Rand des Containers siehst.

Abstand gehört an den Container

Der Abstand liegt nur dazwischen 
body {
  font-family: system-ui, sans-serif;
}

.titel {
  margin-bottom: 4px;
  font-size: 14px;
  color: #52525b;
}

/* Die rote Kante markiert das Ende des Containers.
   Oben klebt hinter dem dritten Kasten noch ein
   Außenabstand, den niemand bestellt hat.
   width: fit-content zieht die Kante direkt hinter
   den Inhalt. Ohne diese Zeile wäre die Reihe so
   breit wie die Seite und die Kante läge so weit
   rechts, dass man den Unterschied nicht sähe. */
.reihe {
  display: flex;
  width: fit-content;
  margin-bottom: 24px;
  border-right: 4px solid #b91c1c;
  background-color: #f4f4f5;
}

.kasten {
  padding: 8px 16px;
  font-weight: 700;
  color: #ffffff;
  background-color: #2563eb;
}

.margin .kasten {
  margin-right: 24px;
}

.luecke {
  gap: 24px;
}

margin-right an jedem Item setzt den Abstand auch hinter das letzte. Im Beispiel markiert die rote Kante das Ende des Containers. Oben bleibt vor ihr noch ein leerer Streifen, den niemand haben wollte.

Die klassische Antwort darauf steht in vielen älteren Stylesheets.

.kasten:last-child { margin-right: 0; }

Das ist eine Regel, die nur existiert, um eine andere Regel zu reparieren. Ändert sich die Richtung, muss sie mitwandern. Braucht es auch senkrecht Abstand, muss sie verdoppelt werden. Und in umgebrochenen Reihen stimmen ihretwegen die Abstände am Zeilenende nicht.

Bei gap liegt der Abstand nur zwischen den Items. Außen liegt nichts, hinter dem letzten liegt nichts, und die Reparaturregel entfällt komplett.

Dahinter steckt eine Denkweise, die über diese eine Eigenschaft hinausgeht. Der Abstand zwischen Geschwistern gehört an den Container, nicht an die Kinder. Der Container weiß, wie seine Kinder zueinander stehen. Ein einzelnes Kind weiß nicht einmal, ob es das letzte ist.

Zwei Richtungen

Zwei Richtungen, zwei Werte 
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: system-ui, sans-serif;
}

/* row-gap trennt die Zeilen, column-gap die Spalten.
   Das Shorthand gap nimmt beide: erst die Zeilen,
   dann die Spalten. Ein einzelner Wert gilt für
   beide Richtungen. */
.projekte {
  display: flex;
  flex-wrap: wrap;
  row-gap: 12px;
  column-gap: 24px;
  padding: 8px;
  background-color: #f4f4f5;
}

.karte {
  width: 130px;
  padding: 16px;
  border-radius: 12px;
  font-weight: 700;
  background-color: #ffffff;
}

Es gibt drei Schreibweisen.

  • row-gap ist der Abstand zwischen den Zeilen.
  • column-gap ist der Abstand zwischen den Spalten.
  • gap ist das Shorthand für beide. Ein Wert gilt für beide Richtungen, zwei Werte bedeuten erst Zeilen, dann Spalten.

In einer Reihe ohne Umbruch wirkt nur column-gap, es gibt ja keine zweite Zeile. Sobald flex-wrap: wrap dazukommt, wird row-gap sichtbar.

gap funktioniert in Flexbox, in Grid und in mehrspaltigem Text auf dieselbe Weise, und du lernst es damit einmal für alle drei Layout-Modelle. Und es fällt nie zusammen. Das Margin Collapsing aus Lektion 4.4 betrifft nur Außenabstände, und gap ist die Lücke zwischen den Items, die keinem von ihnen gehört.

Beides zusammen geht schief

Wenn beides stehen bleibt 
body {
  font-family: system-ui, sans-serif;
}

.titel {
  margin-bottom: 4px;
  font-size: 14px;
  color: #52525b;
}

.menue {
  display: flex;
  gap: 24px;
  margin: 0 0 24px 0;
  padding: 16px;
  list-style: none;
  background-color: #18181b;
}

.menue li {
  padding: 4px 8px;
  font-weight: 700;
  color: #ffffff;
  background-color: #2563eb;
}

/* Der Außenabstand aus dem alten Stylesheet steht
   noch da. Er verschwindet nicht, weil gap dazukommt,
   er addiert sich. Im Stylesheet steht 24, auf dem
   Bildschirm liegen 40. */
.doppelt li {
  margin-right: 16px;
}

gap ersetzt den alten Außenabstand nicht, es kommt dazu. Schreibst du gap: 24px an den Container und lässt den margin-right: 16px an den Kindern stehen, hast du auf dem Bildschirm 40px. Im Stylesheet steht 24, gemessen sind es 40, und man sucht den Fehler an der falschen Stelle. Beim Umstellen passiert das leicht, denn die alten Außenabstände stehen an den Kindern und damit ganz woanders als die neue Zeile am Container.

Zum Einführen von gap gehört deshalb immer ein zweiter Schritt. Die alten Außenabstände kommen raus, und zwar an jedem einzelnen Kind.

In der Aufgabe stammt ein Stylesheet aus der Zeit vor gap.

Zum Mitnehmen

gap legt Abstand nur zwischen die Items, nie außen herum. Die alte Regel, die beim letzten Kind den Außenabstand wieder auf null setzt, braucht es damit nicht mehr, und alte Außenabstände an den Kindern kommen beim Umstieg raus.

Jetzt du

Basis Konto, kostenlos

Zu dieser Lektion gehört eine Aufgabe. Du schreibst den Code selbst, und nach jedem Lauf sagt dir eine Prüfliste, was schon stimmt.

Dafür brauchst du das Basis Konto. Es kostet nichts, und ein Passwort gibt es auch nicht.

Was in dieser Lektion steckt

  • Artikel mit 3 Beispielen zum Ausprobieren

    Steht hier, ohne Konto lesbar.

  • Aufgabe im Editor, direkt im Browser geprüft

    Öffnet sich mit dem Basis Konto.