CSS Layout

Es gibt eine Reihe von Methoden, die Sie verwenden können, um Ihre Webseiten und Anwendungen zu gestalten. MDN enthält mehrere detaillierte Leitfäden zu den verschiedenen Methoden, und diese Seite bietet einen Überblick über alle.

Normaler Fluss, Block- und Inline-Layout

Wenn Sie kein Flex- oder Grid-Layout verwenden, wird Ihr Inhalt im normalen Fluss oder Block- und Inline-Layout angeordnet. Diese Leitfäden helfen Ihnen zu verstehen, wie diese Layoutmethode funktioniert.

Block- und Inline-Layout im normalen Fluss: Eine Einführung in den normalen Fluss.
Im Fluss und aus dem Fluss: Wie man ein Element aus dem Fluss nimmt und was das für das Layout Ihres Dokuments bedeutet.
Formatierungskontexte erklärt: Eine Einführung in die Erstellung eines neuen Formatierungskontextes.
Flusslayout und Schreibmodi: Wie das Flusslayout funktioniert, wenn Sie einen anderen Schreibmodus verwenden, z.B. vertikalen Text.
Flusslayout und Überlauf (overflow): Überlauf verstehen und verwalten.
Einführung in das CSS-Boxmodell: Das Boxmodell zu verstehen ist eine grundlegende CSS-Kenntnis; dieser Leitfaden erklärt, wie es funktioniert.
Beherrschen der Randüberlappung: Erfahren Sie, warum Sie manchmal weniger Rand haben, als Sie erwarten, aufgrund der Randüberlappung im normalen Fluss.
CSS z-index verstehen: Absolutes Positionieren, Flexbox und Grid ermöglichen die Manipulation des Stapels (relative Positionierung der Elemente auf der Z-Achse) über die z-index-Eigenschaft. Dieser Artikel erklärt, wie man es verwaltet.

Mehrspaltenlayout

Mehrspaltenlayout, oft als Multicol bezeichnet, nimmt Inhalt im normalen Fluss und teilt ihn in Spalten auf. Erfahren Sie, wie Sie diese Layoutmethode in den folgenden Leitfäden verwenden können.

Grundkonzepte von Multicol: Ein Überblick über die grundlegende Funktionalität von Multicol.
Spalten stylen: Es gibt nur begrenzte Styling-Möglichkeiten für Spalten; dieser Leitfaden erklärt, was Sie tun können.
Spannen und Ausgleichen: Elemente über Spalten hinweg spannen und den Inhalt der Spalten ausgleichen.
Umgang mit Überlauf in Multicol: Was passiert, wenn mehr Inhalt vorhanden ist als Spaltenraum verfügbar?
Inhaltsumbrüche in Multicol: Umgang mit Inhaltsumbrüchen, wenn der Inhalt in Spalten aufgeteilt wird.

Flexbox

CSS Flexible Box Layout, allgemein bekannt als Flexbox, ist ein Layoutmodell, das für das Design von Benutzeroberflächen und die Anordnung von Elementen in einer Dimension optimiert ist. Im Flexlayoutmodell können die Kinder eines Flexcontainers in jede Richtung angeordnet werden und ihre Größen "flexen", entweder um ungenutzten Raum zu füllen oder um das Überlaufen des Elternteils zu vermeiden.

Grundkonzepte von Flexbox: Ein Überblick über die Eigenschaften von Flexbox.
Beziehung von Flexbox zu anderen Layoutmethoden: Wie Flexbox mit anderen Layoutmethoden und anderen CSS-Spezifikationen zusammenhängt.
Ausrichtung von Elementen in einem Flexcontainer: Wie die Eigenschaften der Box-Ausrichtung mit Flexbox funktionieren.
Reihenfolge der Flexelemente ändern: Erklärung der verschiedenen Möglichkeiten, die Reihenfolge und Richtung von Elementen zu ändern, und Darstellung der potenziellen Probleme bei der Umsetzung.
Steuerung der Verhältnisse von Flexelementen entlang der Hauptachse: Erklärung der Eigenschaften flex-grow, flex-shrink und flex-basis.
Beherrschen des Umbruchs von Flexelementen: Wie man Flexcontainer mit mehreren Zeilen erstellt und die Darstellung der Elemente entlang dieser Zeilen kontrolliert.
Typische Anwendungsfälle von Flexbox: Gewöhnliche Designmuster, die typische Anwendungsfälle von Flexbox sind.

Gridlayout

CSS Grid Layout führt ein zweidimensionales Rastersystem in CSS ein. Rastersysteme können verwendet werden, um sowohl große Seitenbereiche als auch kleine Benutzeroberflächenelemente zu gestalten.

Grundkonzepte des Gridlayouts: Ein Überblick über die Eigenschaften des Gridlayouts.
Beziehung von Gridlayout zu anderen Layoutmethoden: Wie Grid mit anderen Methoden wie Ausrichtung, Größenanpassung und Flexbox zusammenhängt.
Layout mittels linienbasierter Platzierung: Wie man Elemente mit nummerierten Linien platziert.
Grid-Template-Bereiche: Wie man Elemente mit der Syntax des grid-templates platziert.
Layout mithilfe benannter Gridlinien: Wie man Linien benennt und Elemente nach Liniennamen statt nach Nummer platziert.
Automatische Platzierung im CSS Grid Layout: Wie man den Algorithmus zur automatischen Platzierung verwaltet und versteht, wie der Browser Elemente platziert.
Box-Ausrichtung im CSS Grid Layout: Wie man Elemente ausrichtet und den Raum auf beiden Achsen im Raster verteilt.
CSS Grid, logische Werte und Schreibmodi: Wie man Fluss relativ, statt physische Eigenschaften und Werte mit dem Raster verwendet.
CSS Grid Layout und Barrierefreiheit: Einige Überlegungen zur Barrierefreiheit bei der Arbeit mit Gridlayout.
CSS Grid und progressive Verbesserung: Wie man sicherstellt, dass Ihre Website auch in Browsern, die Grid nicht unterstützen, gut funktioniert.
Umsetzung häufiger Layouts mit CSS Grid: Verwendung von Grid zum Erstellen einiger häufiger Layouts.
Subgrid: Eine Erklärung des Werts Subgrid, der Teil von Grid Level 2 ist.
Masonry-Layout: Eine Erklärung der Masonry-Layout-Funktion in Grid Level 3.

Ausrichtung

Box-Ausrichtung im Blocklayout: Die Ausrichtungseigenschaften sind für Block- und Inline-Layout spezifiziert, jedoch gibt es bisher keine Unterstützung in Browsern.
Box-Ausrichtung in Flexbox: Die Ausrichtungseigenschaften traten erstmals mit Flexbox auf; dieser Leitfaden erklärt, wie sie funktionieren.
Box-Ausrichtung im Gridlayout: Wie man Elemente im Gridlayout ausrichtet.
Box-Ausrichtung im Mehrspaltenlayout: Wie die Ausrichtung im Multicol funktionieren wird.