CSS-Leitfäden

Es gibt eine Reihe von Methoden, die Sie verwenden können, um Ihre Webseiten und Anwendungen zu gestalten. MDN enthält eine Reihe von ausführlichen 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 dargestellt. Diese Leitfäden helfen Ihnen, die Funktionsweise dieser Layout-Methode zu verstehen.

Block- und Inline-Layout im normalen Fluss: Eine Einführung in den normalen Fluss.
Im Fluss und außerhalb des Flusses: Wie man ein Element aus dem Fluss nimmt und was das für das Layout Ihres Dokuments bedeutet.
Erläuterung der Formatierungskontexte: Eine Einführung in die Erstellung eines neuen Formatierungskontextes.
Flusslayout und Schreibmodi: Wie das Flusslayout funktioniert, wenn Sie einen anderen Schreibmodus wie vertikalen Text verwenden.
Flusslayout und Überlauf: Überlauf verstehen und verwalten.
Einführung in das CSS-Boxmodell: Das Boxmodell zu verstehen ist ein grundlegendes CSS-Konzept; dieser Leitfaden erklärt, wie es funktioniert.
Meisterung des Margin Collapsing: Finden Sie heraus, warum Sie manchmal weniger Rand als erwartet haben, aufgrund des Margin Collapsing im normalen Fluss.
CSS-z-Index verstehen: Absolute Positionierung, Flexbox und Grid führen alle dazu, dass der Stapel (die relative Position von Elementen auf der z-Achse) über die z-index-Eigenschaft manipulierbar wird. Dieser Artikel erklärt, wie man es verwaltet.

Mehrspaltiges Layout

Mehrspaltiges Layout, oft als Multicol bezeichnet, nimmt Inhalte im normalen Fluss und teilt sie in Spalten auf. Erfahren Sie, wie Sie diese Layout-Methode in den folgenden Leitfäden verwenden können.

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

Flexbox

CSS Flexible Box Layout, allgemein bekannt als Flexbox, ist ein Layout-Modell, das für das Design von Benutzeroberflächen und das Layout von Elementen in einer Dimension optimiert ist. Im Flex-Layout-Modell können die Kinder eines Flex-Containers in beliebiger 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 Funktionen von Flexbox.
Beziehung von Flexbox zu anderen Layout-Methoden: Wie Flexbox mit anderen Layout-Methoden und anderen CSS-Spezifikationen in Beziehung steht.
Ausrichten von Elementen in einem Flex-Container: Wie die Box-Ausrichtungs-Eigenschaften mit Flexbox arbeiten.
Anordnung von Flex-Elementen: Erklärung der verschiedenen Möglichkeiten, die Reihenfolge und Richtung von Elementen zu ändern, und Erwähnung möglicher Probleme.
Steuerung der Verhältnisse von Flex-Elementen entlang der Hauptachse: Erklärung der Eigenschaften flex-grow, flex-shrink und flex-basis.
Meisterung der Umbrüche von Flex-Elementen: Wie man Flex-Container mit mehreren Linien erstellt und die Anzeige der Elemente entlang dieser Linien steuert.
Typische Anwendungsfälle von Flexbox: Häufige Designmuster, die typische Flexbox-Anwendungsfälle sind.

Grid-Layout

CSS Grid Layout führt ein zweidimensionales Gittersystem in CSS ein. Raster können verwendet werden, um große Seitenbereiche oder kleine Benutzeroberflächeselemente zu gestalten.

Grundkonzepte von Grid-Layout: Ein Überblick über die Funktionen des Grid-Layouts.
Beziehung des Grid-Layouts zu anderen Layout-Methoden: Wie Grid mit anderen Methoden wie Ausrichtung, Größenänderung und Flexbox in Beziehung steht.
Layout mit zeilenbasierter Platzierung: Wie man Elemente durch nummerierte Linien platziert.
Grid-Template-Bereiche: Wie man Elemente mit der grid-template-Syntax platziert.
Layout mit benannten Gitterlinien: Wie man Linien benennt und Elemente nach Linienneamen 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 flussrelativ anstelle von physikalischen Eigenschaften und Werten mit dem Raster verwendet.
CSS Grid-Layout und Barrierefreiheit: Einige Überlegungen zur Barrierefreiheit bei der Arbeit mit Grid-Layout.
Realisierung gängiger Layouts mit CSS-Grid: Verwendung von Grid zur Erstellung einiger üblicher Layouts.
Subgrid: Eine Erklärung des Subgrid-Werts, Teil von Grid Level 2.
Masonry-Layout: Eine Erklärung der Masonry-Layout-Funktion in Grid Level 3.

Ausrichtung

Box-Ausrichtung im Block-Layout: Die Ausrichtungseigenschaften sind für Block- und Inline-Layout spezifiziert, allerdings gibt es noch keine Unterstützung in Browsern.
Box-Ausrichtung in Flexbox: Die Ausrichtungseigenschaften sind zuerst in Flexbox aufgetreten; dieser Leitfaden erklärt, wie sie funktionieren.
Box-Ausrichtung im Grid-Layout: Wie man Elemente im Grid-Layout ausrichtet.
Box-Ausrichtung im Mehrspalten-Layout: Wie die Ausrichtung im Multicol funktionieren wird.