CSS-Leitfäden

Es gibt eine Reihe von Methoden, die Sie verwenden können, um Ihre Webseiten und Anwendungen zu layouten. MDN enthält eine Reihe von tiefgehenden 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 im Block- und Inline-Layout angezeigt. 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.
Erklärung der Formatierungskontexte: Eine Einführung in die Erstellung eines neuen Formatierungskontextes.
Flusslayout und Schreibmodi: Wie der Flusslayout funktioniert, wenn Sie einen anderen Schreibmodus verwenden, wie z.B. vertikalen Text.
Flusslayout und Überlauf: Verständnis und Verwaltung von Überläufen.
Einführung in das CSS-Boxmodell: Das Verständnis des Boxmodells ist ein grundlegender Bestandteil von CSS; dieser Leitfaden erklärt, wie es funktioniert.
Beherrschen des Margin-Zusammenfalls: Finden Sie heraus, warum Sie manchmal weniger Abstand haben, als Sie erwarten, aufgrund des Margin-Zusammenfalls im normalen Fluss.
Verständnis des CSS-z-index: Absolute Positionierung, Flexbox und Grid führen dazu, dass der Stapel (relativer Punkt der Elemente auf der z-Achse) über die z-index-Eigenschaft manipulierbar ist. Dieser Artikel erklärt, wie man ihn verwaltet.

Mehrspaltiges Layout

Das Mehrspaltige Layout, oft als Multicol bezeichnet, nimmt Inhalte im normalen Fluss auf und teilt sie in Spalten auf. Finden Sie heraus, wie Sie diese Layoutmethode 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 Gestaltungsmö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.
Behandlung von Überlauf in Multicol: Was passiert, wenn mehr Inhalt als verfügbarer Spaltenraum vorhanden ist?
Inhaltsbrüche in Multicol: Umgang mit Inhaltsbrü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 das Layout von Elementen in einer Dimension optimiert ist. Im Flex-Layout-Modell können die Kinder eines Flex-Containers in jede Richtung angeordnet werden und ihre Größen "anpassen", entweder um ungenutzten Raum zu füllen oder um Überfluss im Elternteil zu vermeiden.

Grundkonzepte von Flexbox: Ein Überblick über die Funktionen von Flexbox.
Beziehung von Flexbox zu anderen Layoutmethoden: Wie sich Flexbox zu anderen Layoutmethoden und anderen CSS-Spezifikationen verhält.
Ausrichten von Elementen in einem Flex-Container: Wie die Box Alignment-Eigenschaften mit Flexbox funktionieren.
Sortierung von Flex-Elementen: Erklärung der verschiedenen Möglichkeiten, die Reihenfolge und Richtung von Elementen zu ändern, und die möglichen Probleme dabei.
Kontrolle der Verhältnisse von Flex-Elementen entlang der Hauptachse: Erklärung der Eigenschaften flex-grow, flex-shrink und flex-basis.
Beherrschung des Umbruchs von Flex-Elementen: Wie man Flex-Container mit mehreren Zeilen erstellt und die Anzeige der Elemente entlang dieser Zeilen steuert.
Typische Anwendungsfälle von Flexbox: Häufige Designmuster, die typische Anwendungsfälle für Flexbox sind.

Grid-Layout

CSS-Grid-Layout führt ein zweidimensionales Rastersystem in CSS ein. Grids können verwendet werden, um Hauptbereiche der Seite oder kleine Benutzeroberflächenelemente zu layouten.

Grundkonzepte von Grid-Layout: Ein Überblick über die Funktionen des Grid-Layouts.
Beziehung des Grid-Layouts zu anderen Layoutmethoden: Wie sich das Grid auf andere Methoden wie Ausrichtung, Größenanpassung und Flexbox bezieht.
Layout mit zeilenbasierter Platzierung: Wie man Elemente mit nummerierten Linien platziert.
Grid-Template-Bereiche: Wie man Elemente mit der grid-template-Syntax platziert.
Layout mit benannten Grid-Linien: 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 Platz auf beiden Achsen im Grid verteilt.
CSS-Grid, logische Werte und Schreibmodi: Wie man Fluss-relative statt physische Eigenschaften und Werte mit Grid verwendet.
CSS-Grid-Layout und Barrierefreiheit: Einige Überlegungen zur Barrierefreiheit bei der Arbeit mit Grid-Layout.
Realisierung von gängigen Layouts mit CSS-Grid: Verwendung von Grid, um einige gängige Layouts zu erstellen.
Subgrid: Eine Erklärung des Subgrid-Werts, Teil von Grid Level 2.
Mauerwerks-Layout: Eine Erklärung der Mauerwerkslayout-Funktion in Grid Level 3.

Ausrichtung

Box-Ausrichtung im Block-Layout: Die Ausrichtungseigenschaften sind für Block- und Inline-Layouts festgelegt, obwohl es bislang keine Unterstützung durch Browser gibt.
Box-Ausrichtung in Flexbox: Die Ausrichtungseigenschaften erschienen zuerst mit Flexbox; dieser Leitfaden erklärt, wie sie funktionieren.
Box-Ausrichtung im Grid-Layout: Wie man Elemente im Grid-Layout ausrichtet.
Box-Ausrichtung im mehrspaltigen Layout: Wie die Ausrichtung im Multicol funktioniert.

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden