CSS-Leitfäden

Es gibt eine Reihe von Methoden, die Sie verwenden können, um Ihre Webseiten und Anwendungen zu gestalten. MDN enthält mehrere ausführliche 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 durch Block- und Inline-Layout angeordnet. 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 entfernt und was dies für das Layout Ihres Dokuments bedeutet.

Formatierungskontexte erklärt

Eine Einführung in die Erstellung eines neuen Formatierungskontexts.

Fluss-Layout und Schreibmodi

Wie das Fluss-Layout funktioniert, wenn Sie einen anderen Schreibmodus verwenden, z. B. vertikalen Text.

Fluss-Layout und Überlauf

Überlauf verstehen und verwalten.

Einführung in das CSS-Grundboxmodell

Das Boxmodell zu verstehen, ist ein grundlegendes Wissen in CSS; dieser Leitfaden erklärt, wie es funktioniert.

Beherrschung des Margen-Kollabierens

Finden Sie heraus, warum Sie manchmal weniger Rand haben, als Sie erwarten, aufgrund des Margen-Kollabierens im normalen Fluss.

CSS-z-index verstehen

Absolute Positionierung, Flexbox und Grid führen dazu, dass der Stapel (die relative Position der Elemente auf der Z-Achse) über die z-index-Eigenschaft manipulierbar wird. Dieser Artikel erklärt, wie Sie dies verwalten.

Mehrspaltiges Layout

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

Grundkonzepte von Multicol

Ein Überblick über die grundlegenden Funktionen von Multicol.

Spalten stylen

Es gibt begrenzte Styling-Möglichkeiten für Spalten; dieser Leitfaden erklärt, was Sie tun können.

Spannen und Ausbalancieren

Elemente über mehrere Spalten spannen und den Inhalt der Spalten ausbalancieren.

Überlauf in Multicol verwalten

Was passiert, wenn mehr Inhalt als verfügbarer Spaltenplatz vorhanden ist?

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 Layout-Modell, das für Benutzeroberflächendesign und die Anordnung von Elementen in einer Dimension optimiert ist. Im Flex-Layout-Modell können die Kinder eines flexiblen Containers in jede Richtung angeordnet werden und ihre Größe "flexen", entweder um ungenutzten Platz auszufüllen oder um zu vermeiden, dass der Elternteil überläuft.

Grundkonzepte von Flexbox

Ein Überblick über die Funktionen von Flexbox.

Beziehung von Flexbox zu anderen Layout-Methoden

Wie Flexbox mit anderen Layout-Methoden und CSS-Spezifikationen zusammenhängt.

Elemente in einem Flexcontainer ausrichten

Wie die Ausrichtungseigenschaften in Flexbox funktionieren.

Flexelemente anordnen

Die verschiedenen Möglichkeiten, die Reihenfolge und Richtung von Elementen zu ändern, und die potenziellen Probleme dabei.

Verhältnisse von Flexelementen entlang der Hauptachse steuern

Erklärung der Eigenschaften flex-grow, flex-shrink und flex-basis.

Umbruch von Flexelementen meistern

Wie man Flexcontainer mit mehreren Zeilen erstellt und die Darstellung der Elemente entlang dieser Zeilen steuert.

Typische Anwendungsfälle von Flexbox

Häufige Designmuster, die typische Flexbox-Anwendungsfälle darstellen.

Raster-Layout

CSS-Grid-Layout führt ein zweidimensionales Rastersystem in CSS ein. Rastersysteme können verwendet werden, um große Seitenbereiche oder kleine Benutzeroberflächenelemente anzuordnen.

Grundkonzepte von Grid-Layout

Ein Überblick über die Funktionen des Raster-Layouts.

Beziehung von Grid-Layout zu anderen Layout-Methoden

Wie Grid mit anderen Methoden wie Ausrichtung, Größenanpassung und Flexbox zusammenhängt.

Layout mit linienbasierter Platzierung

Wie man Elemente anhand nummerierter Linien platziert.

Raster-Template-Bereiche

Wie man Elemente mit der grid-template-Syntax platziert.

Layout mit benannten Rasterlinien

Wie man Linien benennt und Elemente anhand von Liniennamen statt Nummern platziert.

Automatische Platzierung im CSS-Grid-Layout

Wie man den Algorithmus zur automatischen Platzierung steuert und versteht, wie der Browser Elemente platziert.

Box-Ausrichtung im CSS-Grid-Layout

Wie man Elemente ausrichtet und Platz auf beiden Achsen im Raster verteilt.

CSS Grid, logische Werte und Schreibmodi

Wie man flussrelativen anstelle von physikalischen Eigenschaften und Werten mit Grid verwendet.

CSS-Grid-Layout und Barrierefreiheit

Einige Überlegungen zur Barrierefreiheit in Bezug auf das Grid-Layout.

Häufig verwendete Layouts mit CSS Grid umsetzen

Verwendung von Grid zur Erstellung häufiger Layouts.

Subgrid

Eine Erklärung der Subgrid-Eigenschaft, Teil von Grid Level 2.

Masonry-Layout

Eine Erklärung des Masonry-Layout-Features in Grid Level 3.

Ausrichtung

Box-Ausrichtung im Block-Layout

Die Ausrichtungseigenschaften sind für Block- und Inline-Layouts spezifiziert, obwohl es derzeit keine Browserunterstützung gibt.

Box-Ausrichtung in Flexbox

Die Ausrichtungseigenschaften wurden erstmals mit Flexbox eingeführt; dieser Leitfaden erklärt, wie sie funktionieren.

Box-Ausrichtung im Raster-Layout

Wie man Elemente im Raster-Layout ausrichtet.

Box-Ausrichtung im mehrspaltigen Layout

Wie die Ausrichtung im Multicol funktioniert.