mitmario.dev

Abschnitt 9 · Lektion 4

Ausrichten auf der Querachse

CSS Im Browser 3 Min Lesezeit 3 BeispieleLektion 4 von 9

Vor Flexbox hat man erstaunliche Verrenkungen gemacht, um etwas senkrecht in die Mitte zu bekommen. Auf der Querachse ist das eine Zeile.

Fünf Werte, eine Querachse

Die fünf Werte für align-items 
body {
  font-family: system-ui, sans-serif;
}

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

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

.kasten {
  width: 180px;
  margin-right: 8px;
  padding: 8px;
  color: #ffffff;
  background-color: #2563eb;
}

.gross {
  font-size: 28px;
}

.klein {
  font-size: 12px;
}

.stretch {
  align-items: stretch;
}

.start {
  align-items: flex-start;
}

.center {
  align-items: center;
}

.end {
  align-items: flex-end;
}

/* baseline richtet an der Schriftgrundlinie aus.
   Bei unterschiedlich großer Schrift ist das der
   einzige Wert, der ordentlich aussieht. */
.baseline {
  align-items: baseline;
}

align-items richtet alle Items auf der Querachse aus. Bei flex-direction: row ist das senkrecht, bei column waagerecht. Es gibt fünf Werte.

  • stretch zieht jedes Item über die volle Größe der Querachse. Das ist der Standard, mehr dazu im nächsten Abschnitt.
  • flex-start setzt sie an den Anfang der Querachse, bei einer Reihe also nach oben.
  • center sammelt sie in der Mitte.
  • flex-end setzt sie ans Ende.
  • baseline richtet an der Schriftgrundlinie aus.

baseline ist der Wert, den man selten hinschreibt und öfter bräuchte. Steht in einer Reihe unterschiedlich große Schrift, sieht center daneben aus. Dann stehen nämlich die Kästen auf einer Linie und nicht die Buchstaben. baseline richtet an dem aus, was das Auge tatsächlich als Linie liest.

Und für die eine Ausnahme gibt es align-self. Es steht am Item statt am Container, kennt dieselben Werte und überstimmt das align-items des Containers für genau dieses eine Kind.

stretch ist der Grund, warum Karten gleich hoch sind

Gleich hoch, ohne dass jemand eine Höhe gesetzt hat 
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

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

.projekte {
  display: flex;
  margin-bottom: 24px;
}

/* Nirgendwo steht eine Höhe. Im oberen Kasten sind die
   Karten trotzdem gleich hoch, weil stretch der
   Standardwert von align-items ist. */
.karte {
  width: 220px;
  margin-right: 16px;
  padding: 16px;
  border-radius: 12px;
  background-color: #ffffff;
}

.karte h3 {
  margin: 0 0 4px 0;
}

.karte p {
  margin: 0;
  color: #52525b;
}

.stretch {
  align-items: stretch;
}

.start {
  align-items: flex-start;
}

stretch ist der Standardwert, und deshalb sind Flex-Items von allein gleich groß auf der Querachse. In einer Reihe heißt das gleich hoch. Nirgendwo im Beispiel steht eine Höhe, und die beiden Karten sind trotzdem exakt gleich hoch, obwohl in der einen deutlich mehr Text steht. Bei der Breite, mit der die Spalte startet, misst im Auskunftsstreifen jede von ihnen rund 166 × 171. Im unteren Kasten steht flex-start, und dort sind es rund 166 × 171 und 166 × 114.

Im Streifen steht dabei ein anderes Wort, als man erwartet. Der Standardwert heißt eigentlich normal, nicht stretch. An einem Container, an dem niemand etwas gesetzt hat, steht align-items: normal, und die Karten darin sind trotzdem gestreckt. normal heißt „nimm, was hier üblich ist“, und in einem Flex-Container ist das eben stretch. Erst wenn jemand stretch ausdrücklich hinschreibt, steht es auch da. Beim Grid begegnet dir dasselbe Wort wieder.

Früher war das eine ernsthafte Aufgabe. Man hat Höhen geraten, man hat Tabellen missbraucht, man hat JavaScript geschrieben, das nach dem Laden die höchste Karte misst und die Werte verteilt. Heute ist es der Zustand, den man aktiv abschalten muss, wenn man ihn nicht will.

Für die Karten am Ende des Abschnitts ist das praktisch, denn gleich hohe Karten gibt es damit geschenkt.

align-items gegen align-content

Die Verwechslung mit align-content 
body {
  font-family: system-ui, sans-serif;
}

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

/* Beide Kästen sind 220px hoch und brechen um. Der
   Unterschied ist die Ebene: align-items richtet jedes
   Item in seiner Zeile aus, align-content den Stapel
   aus Zeilen im Container. */
.reihe {
  display: flex;
  flex-wrap: wrap;
  height: 220px;
  margin-bottom: 16px;
  padding: 8px;
  background-color: #f4f4f5;
}

.kasten {
  width: 120px;
  margin: 4px;
  padding: 16px;
  font-weight: 700;
  color: #ffffff;
  background-color: #2563eb;
}

/* Das align-content: flex-start gehört dazu. Ohne es
   gilt der Vorgabewert, und der dehnt die Zeilen über
   die ganzen 220px. Dann verteilen sich die Kästen
   doch wieder über die volle Höhe, und der Unterschied
   zum Kasten darunter wäre kaum noch zu sehen. */
.items {
  align-items: center;
  align-content: flex-start;
}

.content {
  align-content: center;
}

Die beiden arbeiten auf verschiedenen Ebenen.

  • align-items richtet jedes Item innerhalb seiner Zeile aus.
  • align-content richtet den Stapel aus Zeilen im Container aus.

Daraus folgt eine Bedingung. align-content tut nur etwas, wenn der Container umbrechen darf. Ohne flex-wrap: wrap bleibt es bei einer Zeile, die die ganze Höhe füllt. Die Angabe steht dann gültig da und bewirkt nichts. Mit wrap rückt sie auch eine einzelne Zeile, solange nur eine nötig ist.

Im Beispiel oben entschärft eine zusätzliche Deklaration noch eine Falle. Der Vorgabewert von align-content verhält sich wie stretch. In einem umbrechenden Container mit fester Höhe werden die Zeilen also von sich aus auseinandergezogen, und align-items richtet dann jedes Item in einer bereits gedehnten Zeile aus. Schreibst du nur align-items: center und wunderst dich, warum trotzdem nichts zusammenrückt, hast du diesen Fall vor dir. Wie bei justify-content ohne freien Platz sehe ich dann zuerst nach, ob es überhaupt etwas zu verteilen gibt.

vertical-align hat in einem Flex-Container keine Wirkung. Es gehört zu Inline-Elementen und Tabellenzellen. Empfiehlt eine Anleitung es fürs senkrechte Zentrieren, meint sie eine Seite ohne Flexbox.

In der Aufgabe stehen Symbol, Text und Button schon nebeneinander, nur ist auf der Querachse noch nichts ausgerichtet.

Zum Mitnehmen

Senkrecht zentrieren heißt in einer Flex-Reihe align-items: center. Nicht vertical-align, nicht margin-top mit einer geratenen Zahl, nicht position mit einem transform. Eine Zeile, und sie stimmt auch dann noch, wenn der Inhalt sich ändert.

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.