mitmario.dev

Abschnitt 9 · Lektion 3

Verteilen auf der Hauptachse

CSS Im Browser 3 Min Lesezeit 4 BeispieleLektion 3 von 9

In einer Kopfzeile, die schon eine Flex-Reihe ist, kleben Logo und Links am Anfang aneinander, und dahinter bleibt Platz übrig. Diesen Platz verteilt eine einzige Eigenschaft.

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: 8px 16px;
  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. Genauso verhält sich der Standardwert normal, der im Streifen steht, wenn du nichts 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 stammen aus der gemeinsamen Ausrichtung, die sich Flexbox und Grid teilen (Box Alignment). In einer normalen Reihe tun sie praktisch dasselbe. In einer row-reverse-Reihe aus 9.2 nicht mehr. Dort folgt flex-start der umgedrehten Hauptachse und liegt rechts, und start und left bleiben links. Ich bleibe bei den sechs oben, dann steht im Stylesheet dasselbe wie in der Dokumentation.

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 roten Kanten links und rechts zeigen, 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: 8px 16px;
  font-weight: 700;
  color: #ffffff;
  background-color: #2563eb;
}

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

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

space-around und space-evenly sehen fast gleich aus. Den Unterschied siehst du nur an den Rändern, und 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.

justify-content verteilt nur, was übrig ist. Füllen deine Items den Container komplett aus, ist nichts übrig, und die Angabe tut schlicht nichts. Sie steht gültig da, sie hat keinen Fehler, es gibt nur nichts zu verteilen. Bleibt ein justify-content wirkungslos, siehst du am besten zuerst hier nach.

So nicht, nichts mehr übrig 
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

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

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

/* Zwei Kästen, je halb so breit wie die Reihe. Damit
   ist sie voll, und es bleibt nichts zu verteilen. */
.kasten {
  width: 50%;
  padding: 16px;
  background-color: #dbeafe;
}

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

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

Im Beispiel stehen zwei Reihen, oben mit flex-start, unten mit flex-end, und sie sehen gleich aus. Die beiden Kästen sind je halb so breit wie die Reihe, also ist sie voll. Für flex-end bleibt nichts, was es ans Ende schieben könnte. Beide Angaben stehen gültig im Stylesheet, und keine tut etwas.

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

In einer Kopfzeile soll oft das Logo links stehen und der Rest rechts, und mit space-between klappt das nur so lange, wie es genau zwei Elemente sind. Bei dreien reißt es alle drei auseinander.

Die bessere Antwort ist ein automatischer Außenabstand. In Flexbox schluckt margin: auto den gesamten übrigen Platz auf seiner Seite. margin-right: auto am Logo schiebt damit alles, was danach kommt, ans Ende der Reihe, und die Links bleiben dabei als Gruppe beieinander.

justify-content ist die Anweisung an alle, margin: auto die Ausnahme für einen.

In der Aufgabe hängt das Logo der Kopfzeile noch über der Navigation statt daneben.

Zum Mitnehmen

justify-content kümmert sich nur um den Rest, der nach dem Aufreihen frei bleibt, und eine volle Reihe bleibt davon unberührt. Für ein einzelnes Item, das aus der Reihe ausschert, nimmst du margin: auto.

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 4 Beispielen zum Ausprobieren

    Steht hier, ohne Konto lesbar.

  • Aufgabe im Editor, direkt im Browser geprüft

    Öffnet sich mit dem Basis Konto.