mitmario.dev

Abschnitt 9 · Lektion 3

Verteilen auf der Hauptachse

CSS Im Browser 3 Min Lesezeit 3 BeispieleLektion 3 von 9

Bis hierher hast du Items aufgereiht. Jetzt geht es um den Platz, der dabei übrig bleibt, und um die eine Eigenschaft, die ihn verteilt.

Sechs Werte, eine Achse

Die sechs Werte untereinander 
body {
  font-family: system-ui, sans-serif;
}

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

.reihe {
  display: flex;
  margin-bottom: 16px;
  background-color: #f4f4f5;
}

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

.start {
  justify-content: flex-start;
}

.center {
  justify-content: center;
}

.end {
  justify-content: flex-end;
}

.between {
  justify-content: space-between;
}

.around {
  justify-content: space-around;
}

.evenly {
  justify-content: space-evenly;
}

justify-content arbeitet auf der Hauptachse. Bei flex-direction: row heißt das waagerecht, bei column senkrecht. Die sechs Werte im Beispiel decken alles ab, was du im Alltag brauchst:

  • flex-start drängt die Items an den Anfang der Achse. Der Standard, den du fast nie hinschreibst.
  • center sammelt sie in der Mitte.
  • flex-end schiebt sie ans Ende.
  • space-between verteilt den übrigen Platz zwischen den Items. Das erste klebt am Anfang, das letzte am Ende.
  • space-around gibt jedem Item links und rechts denselben Abstand.
  • space-evenly macht alle Lücken gleich groß, die äußeren eingeschlossen.

Es gibt daneben noch start, end und left, die aus der Grid-Welt herübergewachsen sind. In einer normalen Reihe tun sie praktisch dasselbe. In einer row-reverse-Reihe aus 9.2 nicht mehr: flex-start folgt der umgedrehten Hauptachse und liegt dann rechts, start und left bleiben links. Halt dich an die sechs oben, dann steht in deinem Stylesheet dasselbe wie in jeder Dokumentation, die du dazu findest.

Wo der Unterschied wirklich liegt

Zwei, die gleich aussehen 
body {
  font-family: system-ui, sans-serif;
}

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

/* Die gestreiften Ränder machen sichtbar, wo der
   übrige Platz landet. Bei space-around bekommt
   jedes Item links und rechts denselben Abstand,
   außen liegen deshalb nur halbe Abstände. */
.reihe {
  display: flex;
  height: 60px;
  align-items: center;
  margin-bottom: 24px;
  border-left: 4px solid #b91c1c;
  border-right: 4px solid #b91c1c;
  background-color: #f4f4f5;
}

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

.around {
  justify-content: space-around;
}

.evenly {
  justify-content: space-evenly;
}

space-around und space-evenly werden ständig verwechselt, und man sieht den Unterschied nur, wenn man auf die Ränder schaut. Deshalb hat der Container im Beispiel links und rechts eine rote Kante.

Bei space-around bekommt jedes Item einen eigenen Abstand nach links und nach rechts. Zwischen zwei Items treffen zwei dieser Abstände aufeinander und ergeben zusammen die doppelte Lücke. Außen liegt jeweils nur einer, also die halbe. Das Ergebnis sieht aus, als hätte jemand die Ränder vergessen.

Bei space-evenly sind alle Lücken gleich groß, außen wie innen. Das ist meistens das, was man eigentlich gemeint hat.

Und ein Satz, der später Zeit spart: justify-content verteilt nur, was übrig ist. Wenn deine Items den Container komplett ausfüllen, ist nichts übrig, und dann tut die Angabe schlicht nichts. Sie steht gültig da, sie hat keinen Fehler, es gibt nur nichts zu verteilen. Wenn ein justify-content wirkungslos bleibt, ist das die erste Stelle zum Nachsehen.

Wenn nur einer wandern soll

Nur einer nach rechts 
body {
  font-family: system-ui, sans-serif;
}

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

.kopf {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
  padding: 12px 16px;
  color: #ffffff;
  background-color: #18181b;
}

.logo {
  font-weight: 700;
}

.kopf a {
  margin-left: 16px;
  color: #ffffff;
}

.between {
  justify-content: space-between;
}

/* Ein automatischer Außenabstand frisst in Flexbox
   allen übrigen Platz auf. Alles vor ihm bleibt
   links zusammen, alles ab ihm rutscht nach rechts. */
.auto .logo {
  margin-right: auto;
}

Der häufigste Fall in einer Kopfzeile ist nicht “verteile alles gleichmäßig”, sondern “das Logo links, der Rest rechts”. Mit space-between klappt das genau so lange, wie es zwei Elemente sind. Bei dreien reißt es alle drei auseinander.

Die bessere Antwort ist ein automatischer Außenabstand. In Flexbox hat margin: auto eine besondere Bedeutung: es schluckt den gesamten übrigen Platz auf dieser Seite. margin-right: auto am Logo schiebt damit alles danach ans Ende, und die Links bleiben untereinander als Gruppe zusammen.

Merk dir die Faustregel so: justify-content ist die Anweisung an alle, margin: auto die Ausnahme für einen. Beide zusammen decken so ziemlich jede Kopfzeile ab, die du je bauen wirst, und eine davon baust du in der nächsten Aufgabe.

Zum Mitnehmen

justify-content verteilt den Platz, der nach dem Aufreihen übrig bleibt. Ist kein Platz übrig, weil die Items den Container füllen, tut die Angabe nichts. Das ist die häufigste Erklärung für einen justify-content-Wert, der gültig dasteht und wirkungslos bleibt.

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.