CSS-Layout mit Flexbox und Grid

Eine Seite hat bereits ein Layout, bevor du Flexbox oder Grid hinzufügst. Der normale Dokumentfluss platziert Boxen in HTML-Reihenfolge. Bei horizontalem deutschem Text stehen Blöcke untereinander und Inline-Inhalt verläuft von links nach rechts und bricht um, wenn eine Zeile voll ist.

Blöcke belegen eine Zeile

Absätze, Überschriften, div-Elemente und Abschnitte sind standardmäßig Blockboxen. Ein Block mit width: auto füllt die verfügbare Breite seines Containers und wächst mit seinem Inhalt in die Höhe. Wenn du seine Breite festlegst, rückt der nächste Block deshalb nicht in dieselbe Zeile.

<p>Read the <a href="/guide">setup guide</a> first.</p>
<p>Then install it.</p>

Die Absätze beginnen in getrennten Zeilen. Der Link ist eine Inlinebox innerhalb des ersten Absatzes. Selbst wenn der erste Absatz nur 300px breit ist, beginnt der zweite weiterhin darunter.

Inlineboxen folgen dem Text

Ein <span>, <a>, <strong> oder <em> nimmt normalerweise nur die Breite seines Textes ein. Eine nicht ersetzte Inlinebox ignoriert width und height. Ergänzt du a { width: 200px; }, wird der Link daher nicht 200px breit.

Horizontale Innenabstände, Rahmen und Außenabstände schieben benachbarten Text zur Seite. Vertikale Innenabstände und Rahmen werden gezeichnet, vergrößern aber nicht den Abstand zwischen den umgebenden Zeilen; ein großer Hintergrund kann die Zeile darüber oder darunter überlappen. Vertikale Außenabstände haben keine Wirkung. Ein Bild ist ein ersetztes Element: Es ist standardmäßig inline, doch width und height wirken darauf.

Vertikale Außenabstände können zusammenfallen

Im normalen Dokumentfluss können sich berührende vertikale Außenabstände von Blockboxen zusammenfallen, sodass ein Abstand entsteht. Auf einen Absatz mit margin-bottom: 24px, dem eine Überschrift mit margin-top: 32px folgt, entsteht ein Abstand von 32px. Der größere positive Außenabstand setzt sich durch; der Abstand beträgt nicht 56px. Bei einem positiven Außenabstand von 24px und einem Außenabstand von −10px beträgt das Ergebnis 14px. Horizontale Außenabstände bleiben getrennt.

Der obere Außenabstand eines ersten Kindelements kann auch mit dem oberen Außenabstand seines Elternelements zusammenfallen, wenn kein Rahmen, Innenabstand oder Inline-Inhalt sie trennt. Ein oberer Außenabstand von 20px an einer Überschrift kann einen ganzen Kopfbereich ohne Innenabstand nach unten verschieben, ohne darin Platz zu schaffen. Verwende einen oberen Innenabstand für Platz im Inneren, ergänze einen Rahmen oder gib dem Elternelement display: flow-root. Auch der untere Außenabstand eines letzten Kindelements kann mit dem seines Elternelements zusammenfallen.

Außenabstände von Flex- und Grid-Elementen fallen untereinander nicht zusammen. Stellst du ein Elternelement vom normalen Dokumentfluss auf Flexbox um, können sich dieselben beiden positiven Außenabstände nun addieren. Auch gefloatete und absolut positionierte Boxen behalten getrennte Außenabstände.

Die Richtungen folgen der Schreibrichtung

Die Blockrichtung gibt an, wo aufeinanderfolgende Blöcke stehen; die Inline-Richtung gibt den Verlauf des Textes an. Auch Arabisch und Hebräisch verwenden horizontale Zeilen, ihre Inline-Richtung verläuft aber von rechts nach links. Logische Eigenschaften folgen diesen Richtungen: margin-inline-start: 16px ergibt im Deutschen einen linken und im Arabischen einen rechten Außenabstand. padding-block legt den Innenabstand entlang der Blockrichtung fest.

Die display-Eigenschaft steuert das Verhältnis einer Box zu ihrem Elternelement und die Anordnung ihrer Kindelemente. Das sind getrennte Entscheidungen. Ein Flex-Container kann eine ganze Zeile belegen und zugleich seine eigenen Kindelemente nebeneinander anordnen.

display von außen nach innen lesen

Der äußere Anzeigetyp ist Block oder Inline. Der innere Anzeigetyp beschreibt das Layout innerhalb der Box, etwa Flow, Flex oder Grid.

Die moderne Syntax mit zwei Schlüsselwörtern macht den Unterschied sichtbar: display: inline flex bedeutet dasselbe wie inline-flex. display: block flow-root bedeutet dasselbe wie flow-root. Ein einzelner Wert wie grid legt standardmäßig einen äußeren Blocktyp fest.

Einer Inlinebox eine Größe geben

nav a {
  display: inline-block;
  padding: 12px 16px;
}

Jeder Link steht weiterhin in einer Textzeile, nimmt nun aber Breite, Höhe und vertikale Außenabstände an. Sein vertikaler Innenabstand schafft Platz im Zeilenlayout, statt lediglich über benachbarte Zeilen zu zeichnen. So erhält ein Link eine größere Klickfläche.

Leerraum zwischen Inline-Blockelementen im HTML erscheint als kleiner Abstand zwischen den Boxen. Benötigst du eine kontrollierte Zeile mit einem genauen Abstand, bietet Flexbox dies direkt.

Eine Änderung von display verändert nicht die Bedeutung des HTML-Elements. Ein inline gestaltetes div-Element bleibt ein allgemeiner Container. Wähle eine Liste, einen Link oder eine Schaltfläche nach ihrem Zweck und gestalte dann ihre Box.

Eine Box mit der richtigen Wirkung ausblenden

Eine mit display: none ausgeblendete Fehlermeldung hinterlässt keine Lücke. Wird sie angezeigt, schiebt sie nachfolgenden Inhalt nach unten. visibility: hidden reserviert die Lücke, sodass sich beim Einblenden der Meldung nichts bewegen muss. display: none verhindert außerdem den Tastaturfokus und entfernt den ausgeblendeten Inhalt aus der Screenreader-Ausgabe. Eine Klasse zum visuellen Ausblenden erfüllt einen anderen Zweck: Sie hält Text für Screenreader verfügbar, während sie ihn visuell ausblendet.

Kindelemente und unabhängige Bereiche

Mit ul { display: grid; } werden die Listeneinträge zu Grid-Elementen. Links innerhalb dieser Listeneinträge bleiben im Layout ihres jeweiligen Elternelements. Um diese Links anzuordnen, gib dem Listeneintrag ein eigenes Layout oder verwende Subgrid, wenn gemeinsame Rasterspuren benötigt werden.

display: contents entfernt die eigene Box des umschließenden Elements, sodass dessen Kindelemente am umgebenden Layout teilnehmen. Das Barrierefreiheitsverhalten des Browsers kann dabei auch die Rolle des umschließenden Elements entfernen. Vermeide dies daher bei bedeutungstragenden Steuerelementen, Listen und Tabellen.

display: flow-root erzeugt einen Blockformatierungskontext, einen unabhängigen Flussbereich. Er schließt gefloatete Kindelemente ein und verhindert, dass die Außenabstände des Elternelements mit denen seiner Kindelemente zusammenfallen. Diese Wirkungen werden erreicht, ohne Inhalte abzuschneiden oder Bildlaufleisten hinzuzufügen.

Bei einem Porträt in einem Artikel soll der Text oft einige Zeilen lang daneben und darunter wieder in voller Breite verlaufen. Ein Float erzeugt diese Form des Textflusses. Er hat eine andere Aufgabe als eine Seitenleiste, die in einer eigenen Spalte bleibt.

Ein Bild neben Fließtext setzen

img.portrait {
  float: left;
  width: 160px;
  margin: 0 16px 8px 0;
}

Setze das Bild vor die Absätze, die es umfließen sollen. Das Bild bewegt sich an den linken Rand seines Containers. Der folgende Text nutzt den Platz rechts daneben und hält horizontal 16px sowie unter der Unterkante 8px Abstand. Sobald der Text am Bild vorbei ist, nehmen die Zeilen wieder die volle Containerbreite ein. Verwende float: right für den gegenüberliegenden Rand und float: none, um das Float-Verhalten aufzuheben.

Ein Float wird aus dem normalen Dokumentfluss entfernt, doch benachbarter Inline-Inhalt fließt weiterhin um ihn herum. Nachfolgende Blockboxen selbst ignorieren den Float: Ihre Hintergründe und Rahmen können sich hinter ihm fortsetzen. Ein Absatzhintergrund unter dem Bild bedeutet nicht, dass sein Text das Bild nicht umfließt.

Ein gefloatetes Element wird zu einer Box auf Blockebene. Ein gefloatetes <span> kann daher Breite und Höhe annehmen. Ohne festgelegte Breite schrumpft eine gefloatete Textbox auf die Größe ihres Inhalts; ein Bild hat eigene Abmessungen.

Den nächsten Abschnitt unter dem Bild beginnen

Angenommen, der Text ist kürzer als das Porträt und eine neue Abschnittsüberschrift beginnt neben dem Porträt. Die clear-Eigenschaft steuert diese Anordnung:

.next-section {
  clear: both;
}

Die Überschrift rückt unter vorhergehende Floats auf beiden Seiten. clear: left berücksichtigt nur linke Floats, clear: right nur rechte. Die clear-Eigenschaft auf einer späteren Überschrift macht das vorhergehende Bild nicht selbst wieder zu einem gewöhnlichen Block.

Das Elternelement seine Floats einschließen lassen

Ein Elternelement mit ausschließlich gefloateten Kindelementen erhält durch sie keine Höhe im normalen Dokumentfluss. Sein Hintergrund und Rahmen können zusammengefallen aussehen und der nächste Inhalt kann neben die Floats rücken. Lass das Elternelement sie einschließen:

.profile {
  display: flow-root;
}

Die Höhe des Elternelements umschließt nun das gefloatete Bild. Das unterscheidet sich von clear: flow-root verändert den Flussbereich des Elternelements, während clear ein nachfolgendes Element unter Floats verschiebt.

Ältere Stylesheets enthalten oft einen Clearfix: ein ::after-Pseudoelement mit content: "", display: block und clear: both. Du kannst auch overflow: auto antreffen, um Floats einzuschließen. Das kann bei zu großem Inhalt Bildlauf hinzufügen; flow-root drückt die Aufgabe des Einschließens unmittelbar aus.

Ältere Spaltenlayouts erkennen

Vor Flexbox und Grid wurden Seitenspalten häufig mit prozentualen Breiten und Clear-Regeln gefloatet. Warte solche Regeln mit einem Verständnis für Floats, wähle aber Flexbox oder Grid für neue Spalten, deren Größe und Ausrichtung festgelegt werden müssen.

Ein direktes Kindelement eines Flex- oder Grid-Containers folgt diesem Layout, sodass float auf dieses Element keine Wirkung hat. Fließt Text nicht mehr um ein gefloatetes Bild, nachdem du dem Elternelement display: flex gegeben hast, prüfe zuerst das Layout des Elternelements.

Mit Positionierung kann eine Box eine andere überlappen oder sich von ihrer normalen Position wegbewegen. Entscheide vor dem Festlegen eines Versatzes, ob die Box ihren ursprünglichen Platz behalten soll und welches Vorfahrenelement als Bezug dienen soll.

Statisch, relativ und absolut

Mit position: relative; top: 10px; left: 20px wird eine Box 10px unterhalb und 20px rechts von ihrer ursprünglichen Position gezeichnet. Ihre Nachbarn bleiben an ihrem Platz. Die ursprüngliche Lücke bleibt bestehen, sodass die Box bei einem großen Versatz ihre Nachbarn überlappen kann.

Ein relativ positioniertes Elternelement benötigt keine Versatzwerte, um als Bezug für ein absolut positioniertes Kindelement zu dienen. Das ist eine häufige Anwendung der relativen Positionierung.

Eine Kennzeichnung an einer Karte verankern

.card {
  position: relative;
}
.badge {
  position: absolute;
  top: 8px;
  right: 8px;
}

Die Kennzeichnung ist aus dem normalen Dokumentfluss genommen, sodass die Karte keinen Platz für sie reserviert. Ihre obere und rechte Kante liegen jeweils 8px von den Innenabstandskanten der Karte nach innen versetzt. Lass im Inhalt der Karte genügend Platz, damit ein langer Titel nicht unter die Kennzeichnung läuft.

Der umschließende Block einer absolut positionierten Box ist gewöhnlich die Innenabstandsbox ihres nächsten positionierten Vorfahrenelements. Ein positioniertes Element hat einen beliebigen position-Wert außer static. Bleibt die Karte statisch, sucht die Kennzeichnung weiter oben in der Vorfahrenkette. Gibt es kein geeignetes Vorfahrenelement, dient der anfängliche umschließende Block als Bezug: ein Rechteck in Viewport-Größe am Anfang des Dokuments, das mit der Seite scrollt. Auch ein anderer Wert als none für transform, filter oder perspective auf einem Vorfahrenelement kann diesen Bezug herstellen.

Eine Überlagerung strecken oder zentrieren

Eine absolute Box mit automatischer Größe und Versatzwerten, die sie nicht strecken, schrumpft auf die Größe ihres Inhalts. Legst du bei automatischer Breite sowohl den linken als auch den rechten Versatz fest, füllt sie den Platz dazwischen; das obere und untere Wertepaar funktioniert bei automatischer Höhe entsprechend.

.overlay {
  position: absolute;
  inset: 0;
}

inset legt oben, rechts, unten und links gleichzeitig fest. Bei automatischen Abmessungen und ohne Außenabstände füllt diese Überlagerung den umschließenden Block. Eine festgelegte Breite oder Höhe verändert die Größenberechnung. Entferne daher diese Begrenzungen, wenn die Ebene die ganze Box bedecken soll.

Für eine zentrierte Kennzeichnung unbekannter Größe verwende top: 50%; left: 50%; transform: translate(-50%, -50%). Die Versatzwerte verschieben ihre obere linke Ecke in die Mitte des umschließenden Blocks. Die Verschiebung bewegt sie um die Hälfte ihrer eigenen Breite und Höhe zurück. Bei bekannter Breite und Höhe ist inset: 0; margin: auto eine weitere Methode zum Zentrieren.

Den Bezug für Prozentangaben prüfen

Ein Elternelement mit content-box, width: 400px und einem horizontalen Innenabstand von 20px hat eine 440px breite Innenabstandsbox. Ein absolut positioniertes Kindelement mit width: 50% hat daher eine Inhaltsbreite von 220px. Misst du nur die 400px breite Inhaltsbox des Elternelements, erhältst du das falsche Ergebnis.

Verwende absolute Positionierung für eine Kennzeichnung, eine Kurzinfo oder eine Überlagerung. Seitenspalten benötigen Boxen, die auf die Größe der jeweils anderen reagieren; Flexbox, Grid und normaler Dokumentfluss stellen diese Beziehung her.

Ein Steuerelement zum Seitenanfang und eine Tabellenüberschrift sollen beide sichtbar bleiben, haben aber unterschiedliche Beziehungen zur Seite. Fixierte Positionierung bindet ein Steuerelement an ein Bezugsfenster. Haftende Positionierung belässt eine Box im Dokumentfluss und begrenzt ihre Bewegung auf ihren Abschnitt.

Ein Steuerelement am Viewport anheften

.back-to-top {
  position: fixed;
  right: 16px;
  bottom: 16px;
}

Die Schaltfläche bleibt beim Scrollen des Dokuments in der rechten unteren Ecke des Fensters. Sie beansprucht keinen Platz im normalen Dokumentfluss. Auch ein fixierter Kopfbereich reserviert keinen Platz und kann den ersten Absatz verdecken.

Für einen 64px hohen fixierten Kopfbereich lässt body { padding-top: 64px; } Platz für den ersten Inhalt. Setze außerdem html { scroll-padding-top: 64px; }, damit Abschnittslinks ihre Zielüberschriften nicht unter dem Kopfbereich platzieren. Gib dem Kopfbereich einen Hintergrund, damit Text, der dahinter scrollt, nicht durchscheint.

Ein anderer Wert als none für transform, filter oder perspective auf einem Vorfahrenelement kann dieses zum umschließenden Block des fixierten Elements machen. Das Element bleibt dann innerhalb dieses Vorfahrenelements und kann mit ihm wegscrollen. Untersuche die Vorfahrenelemente, wenn sich ein fixiertes Steuerelement unerwartet mit der Seite bewegt.

Eine Überschrift innerhalb eines Abschnitts haften lassen

thead th {
  position: sticky;
  top: 0;
  background: white;
}

Eine haftende Überschrift nimmt zunächst ihren normalen Platz ein. Wenn sie beim Scrollen die Schwelle top: 0 nach oben überschreiten würde, bleibt sie dort stehen. Sie kann sich nicht über ihren umschließenden Block hinaus bewegen: Das Ende ihres Abschnitts schiebt sie schließlich aus dem sichtbaren Bereich. Das ist für lange Tabellen und Abschnittsnavigationen nützlich.

Der Viewport ist der übliche Bezug für fixierte Elemente. Haftende Elemente nutzen das nächste relevante scrollende Vorfahrenelement; die Seite dient als Bezug, wenn keine nähere scrollende Box dazwischenliegt.

Eine Box untersuchen, die nicht haftet

Prüfe diese Ursachen der Reihe nach:

1. Setze auf der Achse, auf der das Element haften soll, einen anderen Versatzwert als auto, etwa top: 0 für vertikales Scrollen. Das Schlüsselwort sticky allein legt keine Schwelle fest.
2. Prüfe Vorfahrenelemente auf overflow: hidden, auto oder scroll. Sie können zum Bezug für das haftende Element werden, selbst wenn tatsächlich eine andere Box scrollt.
3. Vergleiche die Höhe der haftenden Box mit der ihres umschließenden Blocks. Ein umschließendes Element, das nur so hoch wie seine Überschrift ist, lässt der Überschrift keinen Platz zur Bewegung.

Eine haftende Seitenleiste in einem Raster kann ebenfalls auf die volle Höhe der Zeile gestreckt werden. align-self: start lässt sie ihre Inhaltshöhe behalten und schafft Platz zur Bewegung.

Inhalt und Fokus sichtbar halten

Fixierte und haftende Leisten beanspruchen einen Teil des sichtbaren Bildschirms. Bei 200 % Textvergrößerung kann eine Navigationsleiste deutlich höher werden. Teste neben dem Scrollen auch die Tastaturnavigation. Das WCAG-2.2-Kriterium 2.4.11, Fokus nicht verdeckt (Minimum), verlangt, dass vom Autor hinzugefügter Inhalt ein fokussiertes Element nicht vollständig verdeckt. Halte Leisten niedrig und sorge für geeigneten Scrollraum um Ziele.

Wenn Boxen überlappen, bestimmt die Stapelreihenfolge, welche du vorne siehst. Ein größerer z-index kann eine Box nach vorne bringen, aber nur innerhalb der Gruppe, in der dieser Wert verglichen wird.

z-index zur Wirkung bringen

z-index wirkt auf positionierte Elemente und auf Flex- oder Grid-Elemente. Ein statischer Absatz im normalen Dokumentfluss ignoriert die Eigenschaft. Ein statisches Grid-Element kann sie nutzen, ohne position: relative hinzuzufügen.

Ohne ausdrücklich festgelegte Ebenen werden positionierte Boxen über gewöhnlichen nicht positionierten Boxen gezeichnet. Bei vergleichbaren Boxen auf derselben Ebene wird die später im HTML stehende oben gezeichnet. Positive z-index-Werte, null und negative Werte geben dir mehr Kontrolle über diese Reihenfolge.

Ein Kontext wird als Einheit gestapelt

Ein Stapelkontext enthält eine Gruppe, die der Browser als Ganzes stapelt. Die Ebene eines Kindelements kann die Gruppe nicht über einen höher liegenden benachbarten Kontext heben.

.site-header {
  position: relative;
  z-index: 1;
}
.menu {
  position: absolute;
  z-index: 9999;
}
main {
  position: relative;
  z-index: 2;
}

Hier liegt .menu innerhalb von .site-header, während main dessen Geschwisterelement ist. Vergleiche zuerst die äußeren Gruppen: Der Kopfbereich liegt auf Ebene 1 und main auf Ebene 2. Main wird über dem gesamten Kopfbereich einschließlich des Menüs gezeichnet. Eine Erhöhung von 9999 ändert nur den Platz des Menüs innerhalb des Kopfbereichs.

Hebe den Kopfbereich selbst an, zum Beispiel auf z-index: 3, oder entferne die unnötige Ebene auf main. Wähle die Änderung, die zur gewünschten Reihenfolge der gesamten Seite passt.

Finden, was die Gruppe erzeugt

Das Wurzelelement erzeugt einen Stapelkontext. Häufige weitere Ursachen sind:

• Eine relative oder absolute Box mit einem anderen z-index als auto.
• Ein Flex- oder Grid-Element mit einem anderen z-index als auto.
• Jede fixierte oder haftende Box.
• opacity unter 1 oder ein anderer Wert als none für transform oder filter.
• isolation: isolate.

Ein Elternelement mit opacity: 0.9 kann daher ein Dropdown-Menü einschließen, auch wenn niemand auf diesem Elternelement eine Ebene festgelegt hat. Gehe in den Entwicklerwerkzeugen die Vorfahrenelemente nach oben durch, wenn eine höhere Zahl keinen sichtbaren Unterschied macht. Suche nach dem ersten Paar benachbarter Gruppen, deren Reihenfolge falsch ist.

Dekorationen innerhalb einer Komponente halten

.panel {
  position: relative;
  isolation: isolate;
}
.panel-decoration {
  position: absolute;
  inset: 0;
  z-index: -1;
}

isolation: isolate erzeugt einen Kontext, ohne das Aussehen des Panels zu verändern. Das Kindelement mit negativem Wert wird hinter dem Text des Panels, aber über dessen Hintergrund gezeichnet. Ohne den lokalen Kontext kann es hinter den Hintergrund des Elternelements fallen und verschwinden.

Verwende für die gewünschten Seitenebenen eine kleine gemeinsame Skala, zum Beispiel 1 für angehobene Karten, 10 für einen haftenden Kopfbereich, 100 für Dropdown-Menüs und 1000 für einen modalen Dialog. Benutzerdefinierte CSS-Eigenschaften wie --z-dropdown: 100 erleichtern die Pflege dieser Entscheidungen.

Flexbox ordnet eine Gruppe entlang einer Hauptrichtung an. Es eignet sich für Navigationslinks, Werkzeugleisten und andere Elemente, deren Größe sich aus ihrem Inhalt ergibt. Ein umgebrochenes Flex-Layout kann mehrere Zeilen haben, aber jede Zeile teilt ihren Platz unabhängig auf.

Den Container erstellen

.nav {
  display: flex;
}

Die direkten Kindelemente der Navigation werden zu Flex-Elementen. Ein Link innerhalb eines Listeneintrags ist kein Flex-Element der Navigation, sofern er nicht auch ein direktes Kindelement ist. Text direkt innerhalb des Containers bildet ein anonymes Flex-Element.

Standardmäßig werden die Elemente in einer Zeile ohne Umbruch angeordnet, wachsen nicht und dürfen schrumpfen. Sie beginnen an der Anfangskante der Hauptachse. In einer horizontalen Zeile werden Elemente mit automatischer Höhe auf die Zeilenhöhe gestreckt und erscheinen daher oft gleich hoch.

Vor dem Ausrichten die Achsen benennen

Die Hauptachse folgt flex-direction. Die Querachse verläuft senkrecht dazu. Bei horizontalem deutschem Text:

Eine Zeile folgt der Inline-Richtung, ihr Anfang liegt bei Text von rechts nach links also rechts. Eine Spalte folgt der Blockrichtung. Haupt- und Querachse beschreiben Rollen, keine dauerhaft horizontalen und vertikalen Richtungen.

justify-content wirkt auf der Hauptachse. align-items wirkt auf der Querachse. Nach dem Wechsel von Zeile zu Spalte zentriert justify-content: center vertikal, sofern Höhe übrig ist.

Ermitteln, welche Elemente hineinpassen

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.card {
  flex: 1 1 200px;
}

Betrachte fünf Karten bei einer Inhaltsbreite von 700px. Jede beginnt bei 200px und kann wachsen oder schrumpfen. Drei Karten plus zwei Abstände benötigen 632px; vier plus drei Abstände benötigen 848px. Drei passen in die erste Zeile.

Die erste Zeile teilt 700px abzüglich 32px für Abstände auf: Jede Karte wird etwa 222,7px breit. Die verbleibenden zwei teilen sich 700px abzüglich eines Abstands von 16px: Jede wird 342px breit. Elemente in der zweiten Zeile übernehmen nicht die Breiten der ersten. Verwende Grid, wenn Spalten über Zeilen hinweg auf einer Linie stehen müssen.

flex-flow: row wrap ist eine Kurzschreibweise für Richtung und Zeilenumbruch. Ohne Umbruch hält Flexbox alle Elemente in einer Zeile und lässt sie schrumpfen, soweit ihre Größenbegrenzungen es erlauben.

Eine sinnvolle Lesereihenfolge erhalten

order hat den Standardwert 0. Niedrigere Werte erscheinen zuerst; order: -1 bringt ein Element vor gewöhnliche Elemente. Umgekehrte Richtungen und order ändern die Zeichenreihenfolge, während Screenreader und der normale Tastaturfokus weiterhin dem HTML folgen.

Halte wichtige Abfolgen in einer sinnvollen HTML-Reihenfolge. Eine visuelle Umordnung kann dazu führen, dass eine Person mit Tastatur auf dem Bildschirm hin- und herspringt. Sie kann gegen WCAG 1.3.2, Bedeutungsvolle Reihenfolge, oder 2.4.3, Fokus-Reihenfolge, verstoßen, wenn Bedeutung oder Bedienung beeinträchtigt werden.

Ein Element kann auch ein Container sein. Eine Karte in einer Flex-Zeile kann mit eigenem display: flex; flex-direction: column ihre Inhalte untereinander anordnen. Verwende inline-flex, wenn der äußere Container innerhalb einer Textzeile stehen soll, etwa bei einer Schaltfläche mit Symbol und Beschriftung.

Flexbox beginnt mit einer Größe für jedes Element und passt diese Größen dann an den Container an. Die drei Teile von flex steuern diese Anpassung: Wachstum, Schrumpfung und Basis, in dieser Reihenfolge.

Mit der Basis beginnen

flex-basis liefert die Ausgangsgröße entlang der Hauptachse. Bei auto wird in einer Zeile die Breite und in einer Spalte die Höhe des Elements genommen; ist auch diese Größe automatisch, bestimmt der Inhalt die Größe. Eine explizite Basis hat Vorrang vor der Breite, während Mindest- und Maximalgrößen das Endergebnis weiterhin begrenzen.

Ziehe alle Basisgrößen und Abstände von der Inhaltsgröße des Containers ab. Ein positives Ergebnis ist freier Platz zum Wachsen. Ein negatives Ergebnis ist Platz, den die Elemente abgeben müssen.

Positiven Platz aufteilen

Drei Elemente in einer 600px breiten Zeile haben Basisgrößen von je 100px und Wachstumsfaktoren 1, 1 und 2. Ohne Abstände beanspruchen die Basisgrößen 300px, sodass 300px bleiben. Vier Wachstumsanteile teilen diesen Rest in je 75px auf. Die endgültigen Größen sind 175px, 175px und 250px.

Füge nun gap: 20px hinzu. Zwei Abstände beanspruchen 40px, sodass nach Abzug der Basisgrößen 260px bleiben. Jeder Anteil beträgt 65px; die endgültigen Breiten werden 165px, 165px und 230px. Ein Faktor von 2 verdoppelt den hinzugefügten Platz, nicht die gesamte endgültige Breite.

Platz durch gewichtetes Schrumpfen abgeben

Zwei Elemente mit Basisgrößen von 300px und 400px belegen einen 500px breiten Container ohne Abstand. Sie müssen 200px abgeben. Haben beide flex-shrink: 1, betragen ihre Schrumpfgewichte 300 und 400: Jeder Faktor wird mit seiner Basisgröße multipliziert.

Das erste verliert etwa 85,7px und endet bei etwa 214,3px. Das zweite verliert etwa 114,3px und endet bei etwa 285,7px. Gleiche Schrumpffaktoren bedeuten keine gleichen Verluste in Pixeln. flex-shrink: 0 schützt die Basisgröße eines Elements, was für einen Avatar oder ein Logo nützlich ist.

Diese Berechnungen beschreiben Elemente ohne Innenabstände, Rahmen, Außenabstände oder Größenbegrenzungen, die das Ergebnis verändern. Prüfe diese Bedingungen, wenn ein tatsächliches Layout davon abweicht.

Gängige Werte der Kurzschreibweise lesen

Zwei Elemente mit Inhaltsbreiten von 80px und 200px in einer 600px breiten Zeile werden mit flex: auto 240px und 360px breit: Beide erhalten die Hälfte des Rests von 320px. Mit flex: 1 und ohne begrenzende Mindestgrößen beginnen beide bei null und werden 300px breit.

Eine flexible Spalte schmal werden lassen

Das automatische Minimum eines Flex-Elements kann es so breit wie eine ununterbrochene URL oder Codezeile halten. Erlaube dem Element zu schrumpfen und kümmere dich um den Inhalt darin:

.sidebar { flex: 0 0 240px; }
.main { flex: 1; min-width: 0; }
.main pre { overflow-x: auto; }

Die Seitenleiste bleibt 240px breit. Der Hauptbereich nimmt den Rest ein. Der Code scrollt innerhalb des Hauptbereichs, statt die ganze Seite breiter zu machen. Für gewöhnlichen langen Text erlaubt overflow-wrap: anywhere Umbrüche. Ein Minimum von null stellt Platz bereit; es lässt den Inhalt nicht selbst umbrechen oder scrollen.

Die Ausrichtung beginnt nach der Größenfestlegung. Bestimme die Hauptachse, die Querachse und den jeweils verbleibenden Platz. Eine Eigenschaft kann gültig sein und dennoch keinen sichtbaren Unterschied machen, wenn kein Platz zum Verteilen übrig ist.

Platz auf der Hauptachse aufteilen

justify-content positioniert die Gruppe entlang der Hauptachse. Bei drei 100px breiten Elementen in einer 600px breiten Zeile ohne Abstände bleiben 300px:

flex-start ordnet Elemente dicht am Anfang der Hauptachse an; flex-end dicht an ihrem Ende. start und end folgen dagegen der Schreibrichtung. In einem deutschen row-reverse ordnet flex-start die Elemente am rechten Rand an, start dagegen am linken.

Wenn Elemente mit flex: 1 den gesamten Platz der Zeile beanspruchen, bleibt für justify-content nichts zum Verteilen. Weniger Wachstum oder der Verzicht darauf ändert diese Situation.

Innerhalb jeder Zeile ausrichten

align-items positioniert Elemente auf der Querachse innerhalb ihrer Zeile. Der übliche Standardwert stretch lässt Elemente mit automatischer Höhe in einer Zeile die Zeilenhöhe ausfüllen. Ein Element mit festgelegter Höhe wird nicht auf diese Weise gestreckt. Verwende center, start oder end für andere Positionen oder baseline, um Text unterschiedlicher Größe an seiner Grundlinie auszurichten.

align-self überschreibt diese Wahl für ein einzelnes Element. Flexbox kennt kein justify-self: Die Elemente teilen sich die Hauptachse als Gruppe. Auch justify-items richtet Flex-Elemente nicht aus.

Um ein einzelnes Kindelement in beide Richtungen zu zentrieren, setze justify-content: center; align-items: center auf seinem Flex-Elternelement. Ein höheres Elternelement, etwa eines mit min-height: 100vh, lässt Raum, damit die vertikale Zentrierung sichtbar wird. Füllt das einzige Element die Quergröße der Zeile bereits aus, bewirkt die Zentrierung dort keine Bewegung.

Gruppen mit automatischen Außenabständen trennen

nav {
  display: flex;
  align-items: center;
  gap: 16px;
}
.logo {
  margin-inline-end: auto;
}

Bei horizontalem deutschem Text bleibt das Logo links, während die Links nach rechts rücken. Sein automatischer Außenabstand am Ende nimmt den verbleibenden Platz auf. Ein automatischer Außenabstand am Anfang eines Elements schiebt dagegen dieses und die folgenden Elemente zum Ende hin. Logische Außenabstände passen sich an, wenn sich die Schreibrichtung ändert.

Ein einzelnes Element mit margin: auto kann auf beiden Achsen zentriert werden. Ist ein Element zu groß, verhindern automatische Außenabstände, dass sein Überlauf jenseits der nicht erreichbaren Anfangskante liegt, wie es bei gewöhnlicher Zentrierung geschehen kann.

Zeilen von Elementen unterscheiden

align-content verschiebt in einem umbruchfähigen Container mit zusätzlichem Platz die Zeilen als Gruppe auf der Querachse. Bei flex-wrap: nowrap hat die Eigenschaft keine Wirkung. Bei wrap kann sie eine Zeile auch dann positionieren, wenn die aktuellen Elemente in nur eine Zeile passen. align-items kümmert sich um die Elemente innerhalb jeder Zeile.

gap: 16px 24px legt einen Zeilenabstand von 16px und einen Spaltenabstand von 24px fest. Gap erzeugt Platz zwischen Elementen und Zeilen, niemals außen um den Container herum. Ergänze Innenabstand für äußeren Platz. Jeder durch Ausrichtung verteilte Platz kommt zum Abstand hinzu.

Grid definiert Zeilen und Spalten gemeinsam. Lege die Rasterspuren auf einem Container fest und lass dann seine direkten Kindelemente diese einnehmen. Anders als umgebrochene Flex-Zeilen teilen sich Grid-Zeilen dieselbe Spaltenstruktur.

Die Teile benennen

Eine Rasterspur ist eine Zeile oder Spalte zwischen zwei Rasterlinien. Eine Rasterzelle ist der Schnittpunkt einer Zeile und einer Spalte. Ein Rasterbereich ist ein Rechteck aus einer oder mehreren Zellen. Abstände trennen die Rasterspuren.

.dashboard {
  display: grid;
  grid-template-columns: 200px 1fr 2fr;
  gap: 20px;
}

grid-template-columns definiert die expliziten Spalten; grid-template-rows definiert die expliziten Zeilen. Ohne explizite Spalten hat ein Raster eine Spalte und seine Elemente stehen in Zeilen untereinander.

Einen fr-Anteil berechnen

Die fr-Einheit teilt den Platz auf, der nach festen Rasterspuren und Abständen übrig bleibt. In einem 900px breiten Container hat das Beispiel eine feste Spalte von 200px und zwei Abstände von je 20px. Ziehe diese zuerst ab: Es bleiben 660px. Die beiden flexiblen Spalten verlangen insgesamt drei Anteile, sodass ein Anteil 220px beträgt. Die Breiten sind 200px, 220px und 440px.

Die Bruchteile teilen den verbleibenden Platz für Rasterspuren auf, nicht die gesamten 900px. Eine 2fr-Rasterspur erhält den doppelten flexiblen Anteil einer 1fr-Rasterspur, wenn Mindestgrößen sie nicht begrenzen.

Rasterspuren wiederholen und begrenzen

repeat(4, 1fr) ist die Kurzschreibweise für vier gleich große flexible Rasterspuren. Auch ein Muster lässt sich wiederholen: repeat(2, 100px 1fr) erzeugt 100px 1fr 100px 1fr.

Rasterspurgrößen können auch Längen, Prozentangaben, auto, min-content und max-content verwenden. Die Inhaltsschlüsselwörter fordern Größen entsprechend dem intrinsischen Platzbedarf des Inhalts an.

minmax(150px, 1fr) gibt einer Rasterspur ein Minimum von 150px und ein flexibles Maximum. Verwende für automatisch erzeugte Zeilen grid-auto-rows: minmax(100px, auto), um ein Minimum von 100px zu erhalten und zugleich höherem Inhalt das Vergrößern einer Zeile zu erlauben.

Eine einfache 1fr-Rasterspur hat ein automatisches Minimum, wie minmax(auto, 1fr). Eine lange, nicht umbrechbare URL kann eine Spalte breiter als die übrigen machen. Verwende repeat(3, minmax(0, 1fr)), wenn die Spalten die verfügbare Breite gleichmäßig aufteilen müssen, und ermögliche Umbruch oder Scrollen für zu großen Inhalt darin.

Abstände innerhalb der verfügbaren Breite halten

gap: 16px 32px bedeutet 16px zwischen Zeilen und 32px zwischen Spalten. Es erzeugt keinen Innenabstand um das Raster.

Drei Spalten von 33.33% beanspruchen bereits fast den gesamten 900px breiten Container. Zwei Abstände von je 20px ragen dann um etwa 40px über seine Breite hinaus. Rasterspuren mit Bruchteilen berücksichtigen diese Abstände vor der Aufteilung des Platzes. Daher vermeidet repeat(3, 1fr) diesen Überlauf durch Prozentwerte plus Abstände, wenn die Mindestgrößen des Inhalts hineinpassen.

Zeilen auf Inhalt reagieren lassen

grid-template-rows: auto 1fr auto eignet sich für einen Kopfbereich, Hauptbereich und Fußbereich. Die äußeren Zeilen passen sich ihrem Inhalt an. Bei einer auszufüllenden Containerhöhe oder Mindesthöhe nimmt die mittlere Zeile die verbleibende Höhe ein. Halte Platz für wachsenden Inhalt frei; eine Mindesthöhe der Seite erlaubt einer längeren Seite zu wachsen.

Die Grid-Platzierung beschreibt die Begrenzungen eines Elements. Zähle die Linien um die Spalten und Zeilen oder benenne einen rechteckigen Bereich und platziere das Element darin. Beide Methoden ordnen Boxen an, ohne ihre Reihenfolge im HTML zu ändern.

Begrenzungen statt Spalten zählen

Ein Raster mit drei Spalten hat vier Spaltenlinien. Bei horizontalem deutschem Text liegt Spaltenlinie 1 links und Zeilenlinie 1 oben. Negative Zahlen zählen vom Ende des expliziten Rasters zurück: -1 ist seine letzte Linie.

Um drei Spalten ab Linie 1 zu umfassen, muss die Platzierung an Linie 4 enden. Ein Ende an Linie 3 umfasst nur zwei Rasterspuren.

Platziere auf einer Übersichtsseite mit vier Spalten und drei Zeilen ein Diagramm mit grid-column: 1 / 4; grid-row: 1 / 3. Es belegt drei Spalten und zwei Zeilen: sechs Zellen. Ein Statistikbereich bei grid-column: 4; grid-row: 1 / 3 belegt daneben die letzte Spalte. Eine Tabelle bei grid-column: 1 / -1; grid-row: 3 füllt die dritte Zeile.

Die Seite mit Bereichsnamen zeichnen

.page {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "nav    main"
    "footer footer";
}
header { grid-area: header; }
nav    { grid-area: nav; }
main   { grid-area: main; }
footer { grid-area: footer; }

Jede Zeichenkette beschreibt eine Zeile und jedes Wort eine Zelle. Durch Wiederholen von header über die erste Zeile erstreckt sich der Kopfbereich über beide Spalten. Ein Punkt kennzeichnet eine leere Zelle. Jede Zeile muss dieselbe Anzahl von Zellen enthalten und jeder wiederholte Name muss ein Rechteck bilden. Ein L-förmiger benannter Bereich macht die gesamte grid-template-areas-Deklaration ungültig.

Ein Bereich namens main erzeugt auch Linien mit den Namen main-start und main-end. Du kannst diese Namen für die Begrenzungen eines anderen Elements verwenden. Definiere eigene Liniennamen in eckigen Klammern in der Rasterspurliste, etwa [content-start] 600px [content-end].

Innerhalb eines Rasterbereichs überlappen

Ein Bild und eine Abbildungsbeschriftung können beide grid-area: 1 / 1 verwenden. Sie teilen sich die erste Zelle; die später im HTML stehende Beschriftung wird über dem Bild gezeichnet. align-self: end verschiebt die Beschriftung an den unteren Rand dieses Bereichs. Grid-Elemente nehmen z-index an, ohne eine nicht statische Position zu benötigen. So kannst du ihre Ebenenreihenfolge ausdrücklich ändern.

Die Lesereihenfolge erhalten

Die manuelle Platzierung beeinflusst das Aussehen, nicht die HTML-Reihenfolge, der Screenreader und Tastaturfokus folgen. Halte Anweisungen, Überschriften und Links in einer sinnvollen Quelltextreihenfolge. Ein Layout kann sinnvoll aussehen, während die Tabulatornavigation zwischen weit entfernten Zellen springt. Das kann gegen WCAG 1.3.2 oder 2.4.3 verstoßen, wenn Bedeutung oder Bedienung darunter leiden.

Eine Produktliste kann von wenigen zu vielen Karten wachsen, ohne ihr CSS zu ändern. Definiere die Spalten, lass die automatische Platzierung Zeilen erzeugen und entscheide, ob ungenutzte Spalten ihren Platz behalten sollen.

Elemente die nächste Zelle finden lassen

Der Standardwert grid-auto-flow: row platziert nicht positionierte Elemente in Quelltextreihenfolge, zunächst quer über eine Zeile und dann in der nächsten darunter. Belegte Zellen werden übersprungen. Zusätzliche Rasterspuren bilden das implizite Raster.

.products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(150px, auto);
}

Sieben Elemente erzeugen drei Zeilen. Die letzte Zeile enthält ein Element. Jede Zeile ist mindestens 150px hoch und kann mit ihrem Inhalt wachsen. Explizite Rasterspuren stammen aus der Vorlage; implizite Rasterspuren werden hinzugefügt, wenn die Platzierung sie benötigt.

Negative Liniennummern zählen nur innerhalb des expliziten Rasters. Definierst du Spalten, aber keine Zeilen, kann grid-row: 1 / -1 nicht jede automatisch erzeugte Zeile bezeichnen. Definiere explizite Zeilen, wenn ein Element ihre gesamte Höhe überspannen muss.

grid-auto-flow: column füllt Spalten und erzeugt zusätzliche Spalten, deren Größe grid-auto-columns festlegt. Ergänzt du dense, können spätere kleinere Elemente Lücken füllen, die größere Spannweiten hinterlassen. Das kann die visuelle Reihenfolge ändern. Vermeide es daher bei geordneten Anweisungen oder anderen Inhalten, deren Reihenfolge wichtig ist.

Spalten anhand eines Minimums zählen

.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

Bei einer Inhaltsbreite von 1000px benötigen vier 200px breite Spalten plus drei Abstände von je 16px insgesamt 848px. Fünf Spalten plus vier Abstände benötigen 1064px, also passen nur vier hinein. Ihre flexiblen endgültigen Breiten betragen 238px: Ziehe 48px für Abstände ab und dividiere die verbleibenden 952px durch vier.

Bei 500px benötigen zwei Spalten in Mindestbreite plus ein Abstand 416px; drei benötigen 632px. Zwei passen hinein und werden jeweils 242px breit. Die Anzahl der Spalten ändert sich ohne Breakpoint mit dem verfügbaren Platz.

Entscheiden, was mit ungenutzten Spalten geschieht

Bei genügend Elementen sehen auto-fill und auto-fit gleich aus. Bei nur drei Elementen in diesem 1000px breiten Raster behält auto-fill eine vierte leere Spalte bei, sodass jede belegte Spalte 238px breit bleibt. auto-fit lässt diese leere Rasterspur und ihren Abstand zusammenfallen. Die drei belegten Spalten teilen sich dann 968px und werden jeweils etwa 322,7px breit.

Eine Spalte mit einem Element an beliebiger Stelle gilt als belegt, auch wenn eine Zelle in ihrer letzten Zeile leer ist. Auto-fit lässt leere Rasterspuren zusammenfallen, nicht jede leere Zelle.

Den schmalsten Container schützen

Die automatische Wiederholung benötigt eine bestimmte minimale oder maximale Rasterspurgröße. repeat(auto-fill, 1fr) ist ungültig. Ein festes Minimum von 400px kann außerdem in einem 320px breiten Container überlaufen. Verwende:

grid-template-columns:
  repeat(auto-fit, minmax(min(100%, 400px), 1fr));

min(100%, 400px) wählt das kleinere Minimum, sodass ein schmaler Container eine Rasterspur aufnehmen kann, ohne auf 400px gezwungen zu werden. Kümmere dich weiterhin um zu große Texte oder Bilder innerhalb der Karten.

Die Grid-Ausrichtung wirkt auf zwei verschiedenen Ebenen. Du kannst ein Element innerhalb seines Bereichs oder alle Rasterspuren zusammen innerhalb des Containers verschieben. Bestimme zuerst, welchen Platz du verteilen möchtest.

Elemente innerhalb ihrer Bereiche ausrichten

Bei horizontalem deutschem Text wirken justify--Eigenschaften auf der horizontalen Inline-Achse. align--Eigenschaften wirken auf der vertikalen Blockachse. Grid unterstützt die Elementausrichtung auf beiden Achsen.

Zu den Werten gehören start, end, center und stretch. align-items: baseline richtet die Grundlinien von Text aus. Die meisten automatisch dimensionierten Elemente werden standardmäßig gestreckt. Ein Bild mit eigenem Seitenverhältnis beginnt normalerweise an der Anfangskante des Bereichs, statt in beide Richtungen gestreckt zu werden.

Bei einer Kartenreihe lässt die Streckung jede Karte die Zeilenhöhe ausfüllen. Wechsle zu align-items: start und jede Karte behält ihre Inhaltshöhe; ihre unteren Kanten können sich unterscheiden. align-self: end auf einer Abbildungsbeschriftung platziert sie am unteren Rand ihres Rasterbereichs.

Eine Box in beide Richtungen zentrieren

.hero {
  display: grid;
  place-items: center;
  min-height: 60vh;
}

place-items kombiniert align-items gefolgt von justify-items. Bei einem Wert gilt dieser für beide. Die Mindesthöhe schafft vertikalen Platz um ein kurzes Element. place-self ist die entsprechende Kurzschreibweise auf einem einzelnen Element.

Das Element bleibt eine Box mit Text darin. Um die Wörter innerhalb dieser Box zu zentrieren, setze text-align: center auf dem Element. Wenn du eine Box in die Mitte einer Zelle verschiebst, ändert sich die Ausrichtung ihres Textes nicht.

Rasterspuren als Gruppe verschieben

justify-content positioniert alle Spalten zusammen entlang der Inline-Achse. align-content positioniert die Zeilen entlang der Blockachse. Damit ihre Wirkung sichtbar wird, benötigen diese Eigenschaften zusätzlichen Platz außerhalb der Rasterspuren.

Bei drei festen 200px breiten Spalten in einem 900px breiten Container ohne Abstände bleiben 300px. justify-content: center lässt 150px vor der ersten und nach der letzten Spalte. justify-content: space-between setzt die äußeren Spalten an die Containerränder und verteilt 150px zwischen benachbarten Spalten. Die Elemente bleiben beim Verschieben der Rasterspuren innerhalb ihrer eigenen Rasterspuren.

Verwenden die Spalten fr und füllen die gesamte verfügbare Breite, bleibt horizontal nichts für justify-content zum Verteilen. Mit justify-items: center kannst du weiterhin ein schmales Kindelement sichtbar innerhalb seiner breiten Rasterspur zentrieren. Die erste Eigenschaft positioniert Rasterspuren, die zweite Elemente.

Eine Seite kann mehrere Layoutverfahren gleichzeitig nutzen. Wähle jedes Verfahren passend zur Beziehung zwischen den Boxen im jeweiligen Seitenteil: eine Textfolge, eine flexible Gruppe, gemeinsame Spalten oder eine überlappende Ebene.

Vom Inhalt ausgehen

Der normale Dokumentfluss verarbeitet bereits Artikel, Überschriften und Absätze. Er bricht Text um und verschiebt spätere Blöcke nach unten, wenn früherer Inhalt wächst. Ergänze weitere Strukturen, wenn die Gestaltung eine andere Beziehung verlangt.

Flexbox ist eindimensional: Es teilt Platz entlang einer Zeile oder Spalte auf, wobei jede umgebrochene Zeile unabhängig ist. Grid ist zweidimensional: Es definiert Spalten und Zeilen gemeinsam. Die Wahl betrifft die Anforderungen an das Layout und verbietet nicht, eines der beiden Werkzeuge für eine einfache Zeile zu nutzen.

Eine umgebrochene Zeile mit gemeinsamen Spalten vergleichen

Sieben Karten belegen eine Inhaltsbreite von 1000px mit Abständen von 16px. Gib in Flexbox jeder Karte flex: 1 1 200px und erlaube den Umbruch. Vier Karten passen in die erste Zeile und wachsen auf je 238px. Die drei Karten in der zweiten Zeile wachsen auf je etwa 322,7px. Jede Zeile verteilt ihren eigenen freien Platz.

Verwende nun repeat(auto-fill, minmax(200px, 1fr)) in Grid. Vier Spalten passen hinein. Alle sieben Karten nutzen dieselben 238px breiten Spalten; in der letzten Zeile bleibt eine Zelle leer. Grid erhält die Ausrichtung über die Zeilen hinweg.

Verwende die Flex-Version, wenn breitere Elemente in der letzten Zeile zur Gestaltung passen. Verwende die Grid-Version, wenn eine einheitliche Spaltenstruktur wichtig ist.

Verfahren auf verschiedenen Ebenen kombinieren

Eine Seite kann Grid für eine Seitenleiste und den Hauptbereich, Flexbox für die Werkzeugleiste des Hauptbereichs und eine absolute Kennzeichnung innerhalb einer Karte nutzen. Eine Karte kann außen ein Grid-Element und innen ein Flex-Container sein. Lege die äußere Beziehung auf ihrem Elternelement und die innere Anordnung auf der Karte selbst fest.

Für eine lange Textliste erzeugt columns: 3 oder column-width: 250px einen mehrspaltigen Textfluss. Der Text verläuft eine Spalte hinunter und wird dann in der nächsten fortgesetzt; es ist kein Raster unabhängiger Karten. Prüfe, ob dieser Leseweg zum Inhalt passt.

Ältere Layouts sorgfältig lesen

Gefloatete Spalten, Inline-Block-Raster und für Seitenlayouts verwendete HTML-Tabellen kommen weiterhin in älterem Code vor. Ihre Regeln für Abstände und das Einschließen von Elementen unterscheiden sich von denen in Flexbox und Grid. Verwende beim Erstellen neuer Seitenstrukturen moderne Layoutwerkzeuge. Nutze <table> für Daten, deren Zeilen und Spalten tabellarische Beziehungen ausdrücken.

Ein brauchbares Seitenlayout hat eine gut lesbare Inhaltsbreite, Platz an den Rändern und Raum für längeren Inhalt. Erstelle seine Hauptbereiche im Dokumentfluss, damit ein wachsender Artikel den Fußbereich auf natürliche Weise nach unten verschiebt.

Eine Inhaltsspalte zentrieren

.container {
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: 16px;
}

Die maximale Breite begrenzt das Wachstum auf breiten Bildschirmen. Automatische Inline-Außenabstände teilen den verbleibenden Platz auf beide Seiten auf. Der Innenabstand hält Text auf schmalen Bildschirmen von den Rändern fern. Für Fließtext ergibt max-width: 65ch eine ungefähre Zeilenlänge von 65 Zeichen; ein ch ist die Breite der Ziffer 0 in der aktuellen Schriftart. Eine Zeilenlänge von etwa 45–75 Zeichen ist zum Lesen gut geeignet, obwohl die tatsächlichen Buchstaben unterschiedlich breit sind.

Seitenbereiche auf einem Raster anordnen

.page {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";
}
header { grid-area: header; }
aside  { grid-area: sidebar; }
main   { grid-area: main; }
footer { grid-area: footer; }

Kopf- und Fußbereich erstrecken sich über beide Spalten. Die Seitenleiste behält 240px und der Hauptbereich erhält den Rest. Das Minimum von null auf der flexiblen Rasterspur verhindert, dass breiter Inhalt die Rasterspur über ihren verfügbaren Anteil hinaus vergrößert. Ermögliche für diesen Inhalt Umbruch oder Scrollen innerhalb des Hauptbereichs.

Das dreispaltige Muster, häufig Holy-Grail-Layout genannt, verwendet 200px 1fr 200px und die Bereiche "nav main aside" in der mittleren Zeile; Kopf- und Fußbereich erstrecken sich über alle drei Spalten. Feste Seitenspalten benötigen weiterhin genügend verfügbare Breite. Teste das Layout bei geringer Breite.

Den Fußbereich einer kurzen Seite unten halten

body {
  margin: 0;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

Mit Kopfbereich, Hauptbereich und Fußbereich als direkten Kindelementen füllt die mittlere Zeile die ungenutzte Höhe. Der Fußbereich einer kurzen Seite reicht bis zum unteren Fensterrand; bei einer langen Seite folgt er dem Inhalt. Dieses Muster heißt Sticky Footer, aber der Fußbereich benötigt kein position: sticky.

Die herkömmliche Viewport-Einheit ist vh. Auf Smartphones kann 100vh hinter sichtbare Browsersteuerelemente reichen. Die dynamische Viewport-Höhe dvh folgt der sichtbaren Höhe, wenn sich diese Steuerelemente ändern; alle wichtigen Browser unterstützen sie seit 2022. Verwende min-height, damit längerer Inhalt die Seite vergrößern kann. Bei fester height kann Inhalt über das Folgende hinauslaufen.

Eine Flex-Alternative verwendet einen body als Spalte mit min-height: 100dvh und anschließend main { flex: 1; }. Verwende für eine Zeile mit Seitenleiste .sidebar { flex: 0 0 240px; } und .main { flex: 1; min-width: 0; }.

Eine Seitenleiste haften und ein Bild über die Breite reichen lassen

Eine Grid-Seitenleiste kann position: sticky; top: 16px; align-self: start verwenden. Indem sie ihre eigene Inhaltshöhe behält, bleibt ihr Raum, sich innerhalb ihrer Zeile zu bewegen.

Definiere für Full-Bleed-Inhalt in einem Artikel die Spalten als 1fr min(65ch, 100% - 32px) 1fr. Setze gewöhnliche Kindelemente in Spalte 2 und ein breites Bild auf grid-column: 1 / -1. Die mittlere Rasterspur bleibt gut lesbar, während das Bild die volle Containerbreite überspannt.

Kleine Teile der Benutzeroberfläche kombinieren dieselben wenigen Beziehungen: Ein Bild behält seine Größe, Text füllt den Rest, zusammengehörige Steuerelemente teilen sich eine Zeile oder mehrere Karten richten ihre inneren Teile aneinander aus. Gib jedem Container das Layout, das seine Aufgabe ausdrückt.

Die passende Art der Zentrierung wählen

Auch Flexbox kann ein Kindelement mit justify-content: center; align-items: center zentrieren. Achte darauf, dass der Container auf der jeweiligen Achse freien Platz hat.

Eine Navigationszeile und eine Medienzeile

nav { display: flex; align-items: center; gap: 16px; }
.logo { margin-inline-end: auto; }
.media { display: flex; align-items: flex-start; gap: 16px; }
.media img { flex: none; width: 64px; }
.media-body { flex: 1; min-width: 0; }

Im Deutschen bleibt das Logo links und die Links stehen rechts zusammen. Hat die Navigation genau zwei Kindelemente, ein Logo und eine Linkliste, kann justify-content: space-between sie trennen; die Liste benötigt ein eigenes Flex-Layout, um ihre Links anzuordnen.

In der Medienzeile behält das Bild seine Breite. Der Text erhält den Rest und kann schrumpfen. Die Ausrichtung am Anfang der Querachse verhindert, dass ein Bild mit automatischer Höhe auf die Höhe eines langen Textblocks gestreckt wird. Das eignet sich für einen Kommentar, ein Profil oder einen Produkteintrag.

Karten mit ausgerichteten Schaltflächen

.cards {
  display: grid;
  grid-template-columns:
    repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: 24px;
}
.card { display: flex; flex-direction: column; }
.card .button { margin-top: auto; }

Das übergeordnete Raster streckt die Karten jeder Zeile auf dieselbe Höhe. Innerhalb jeder Karte nimmt der automatische obere Außenabstand den ungenutzten vertikalen Platz vor der Schaltfläche ein und platziert sie unten. Titel können weiterhin unterschiedlich hoch sein.

Um Titel, Texte und Fußbereiche über Karten hinweg auszurichten, verwende Subgrid. Mache jede Karte zu einem Grid-Element, das drei übergeordnete Zeilen überspannt, und setze dann display: grid; grid-template-rows: subgrid. Jede Karte übernimmt diese übergeordneten Zeilen für ihre drei Teile. Subgrid funktioniert seit September 2023 in allen wichtigen Browsern.

Überlagerungen, Formulare und Eingabegruppen

Für Text über einem Bild mache das umschließende Element zu einem Raster und setze beide Kindelemente auf grid-area: 1 / 1. Eine später stehende Abbildungsbeschriftung wird über dem Bild gezeichnet. Eine weitere Möglichkeit ist ein relatives umschließendes Element mit einer absoluten Beschriftungsebene, die inset: 0 verwendet.

Ein Formular mit abwechselnden Beschriftungen und Feldern kann grid-template-columns: max-content 1fr; gap: 12px 16px; align-items: center verwenden. Die breiteste Beschriftung legt eine gemeinsame Beschriftungsspalte fest. Die Felder stehen ausgerichtet in der zweiten Spalte; getrennte Flex-Zeilen können diese Beschriftungsbreite nicht automatisch teilen.

Eine Suchgruppe verwendet display: flex; gap: 8px mit input { flex: 1; min-width: 0; } und button { flex: none; }. Das Eingabefeld kann schrumpfen, während die Schaltfläche ihre natürliche Breite behält. Verwende für Schlagwörter oder Steuerelemente einer Werkzeugleiste, die bei ihrer natürlichen Breite umbrechen sollen, display: flex; flex-wrap: wrap; gap: 8px.

Ein Layoutfehler lässt sich leichter beheben, wenn du die tatsächlichen Boxen des Browsers untersuchst. Beginne mit dem Element, das sich verschoben hat oder überläuft, und prüfe dann das Layout, an dem es teilnimmt, bevor du Werte änderst.

In einer sinnvollen Reihenfolge untersuchen

1. Finde das Element in den Entwicklerwerkzeugen.
2. Untersuche das berechnete display seines Elternelements: Im normalen Dokumentfluss, in Flex und in Grid haben Eigenschaften unterschiedliche Aufgaben.
3. Prüfe, ob deine Eigenschaft für dieses Element in diesem Layout gilt.
4. Vergleiche berechnete Größen, Außenabstände und Position mit deinen erwarteten Werten.
5. Schalte jeweils eine Deklaration um, um zu sehen, welche Bedingung das Problem verursacht.

Der Boxmodellbereich zeigt Inhalt, Innenabstand, Rahmen und Außenabstand. Grid-Überlagerungen zeigen Linien, Nummern, Rasterspuren und Abstände; Flex-Überlagerungen zeigen Elemente und den ihnen zugeteilten Platz. Prüfe damit, was der Browser erstellt hat, nicht nur, was das Stylesheet vorsieht.

Inaktive Eigenschaften prüfen

Versatzwerte bewirken bei einem statischen Element nichts. Breite und Höhe bewirken bei einem gewöhnlichen Inline-<span> nichts, bestimmen aber die Größe eines Inline-Bildes. z-index benötigt eine positionierte Box oder ein Flex-/Grid-Element. float hat keine Wirkung auf Flex- oder Grid-Elemente und justify-self kann ein Flex-Element nicht ausrichten.

Eine gültige Ausrichtungsdeklaration hat möglicherweise keine sichtbare Wirkung, weil Elemente bereits den gesamten Platz nutzen. Auch align-content hat auf einem nowrap-Flex-Container keine Wirkung. Haftende Positionierung benötigt einen Versatz und Platz zur Bewegung.

Horizontalen Überlauf aufspüren

Überlauf kann durch eine zu große Box entstehen oder durch eine kleinere Box, die von Außenabständen, Versatzwerten oder den Breiten benachbarter Elemente über einen Rand hinausgeschoben wird. Häufige Ursachen sind:

• Eine feste Breite wie 1200px, die größer als der Viewport ist.
• width: 100% plus Innenabstand bei Größenberechnung mit content-box.
• width: 100vw, das die Breite einer sichtbaren vertikalen Bildlaufleiste einschließen kann.
• Ein langes ununterbrochenes Wort, eine URL oder eine Codezeile.
• Das automatische Minimum eines Flex-Elements oder einer 1fr-Rasterspur.
• Ein Minimum für die automatische Wiederholung, das breiter als sein Container ist.

Füge vorübergehend * { outline: 1px solid red; } hinzu, um Kanten sichtbar zu machen. Konturen beanspruchen keinen Platz im Layout und zeigen Begrenzungen daher, ohne wie Rahmen die Boxgrößen zu ändern.

Einen breiten Codeblock untersuchen

Eine Flex-Seite hat eine 240px breite Seitenleiste und eine Hauptspalte mit einem 1400px breiten Codebeispiel. Die ganze Seite scrollt seitlich. Die Flex-Überlagerung zeigt den Hauptbereich breiter als seinen Anteil und seine berechnete Mindestbreite ist auto.

.main { min-width: 0; }
.main pre { overflow-x: auto; }

Die erste Regel lässt das Flex-Element schrumpfen. Die zweite hält den breiten Code durch lokales horizontales Scrollen zugänglich. Den gesamten Seitenüberlauf auszublenden, würde das Symptom verbergen, ohne den Code verfügbar zu machen.

Untersuche bei anderen Überraschungen zusammenfallende Außenabstände, einen fixierten Kopfbereich, der Inhalt verdeckt, ein absolutes Kindelement, dessen vorgesehenes Elternelement statisch ist, oder eine Ebene, die in einem durch Deckkraft oder Transformation erzeugten Stapelkontext eingeschlossen ist.

Echten Inhalt und wenig Platz testen

Ändere die Fenstergröße, verwende einen langen Namen oder eine lange URL und vergrößere den Text auf 200 %. Prüfe den Tastaturfokus in der Nähe fixierter Leisten. WCAG-2.2-Kriterium 1.4.4 verlangt Textvergrößerung auf 200 % ohne Verlust von Inhalt oder Funktion. Kriterium 1.4.10 verlangt grundsätzlich einen Umbruch bei 320 CSS-Pixeln ohne Scrollen in zwei Richtungen; für Inhalte, die ein zweidimensionales Layout benötigen, etwa eine Datentabelle, gibt es Ausnahmen. Teste mehr als den kurzen Beispieltext, mit dem die Seite zunächst korrekt aussah.