CSS-Layout-Kochbuch
Das CSS-Layout-Kochbuch zielt darauf ab, Rezepte für gängige Layout-Muster zusammenzustellen, die Sie möglicherweise in Ihren eigenen Websites implementieren müssen. Zusätzlich zur Bereitstellung von Code, den Sie als Ausgangspunkt für Ihre Projekte verwenden können, heben diese Rezepte die verschiedenen Möglichkeiten hervor, wie Layout-Spezifikationen genutzt werden können, und die Entscheidungen, die Sie als Entwickler treffen können.
Hinweis: Wenn Sie neu bei CSS-Layout sind, könnten Sie sich zuerst unser CSS-Layout-Lernmodul ansehen, da es Ihnen die grundlegenden Kenntnisse vermittelt, die Sie benötigen, um die hier vorgestellten Rezepte zu nutzen.
Die Rezepte
| Rezept | Beschreibung | Layout-Methoden |
|---|---|---|
| Media objects | Eine zweispaltige Box mit einem Bild auf der einen und beschreibendem Text auf der anderen Seite, z.B. ein Facebook-Post oder Tweet. | CSS grid, float Fallback, fit-content Größenanpassung |
| Columns | Wann Sie das Mehrspalten-Layout, Flexbox oder Grid für Ihre Spalten wählen sollten. | CSS grid, Multicol, Flexbox |
| Center an element | Wie man ein Element horizontal und vertikal zentriert. | Flexbox, Box Alignment |
| Sticky footers | Erstellen eines Footers, der am unteren Rand des Containers oder Viewports sitzt, wenn der Inhalt kürzer ist. | CSS grid, Flexbox |
| Split navigation | Ein Navigationsmuster, bei dem einige Links visuell von den anderen getrennt sind. | Flexbox, margin |
| Breadcrumb navigation | Erstellen einer Liste von Links, die es dem Besucher ermöglichen, die Seitenhierarchie zurück nach oben zu navigieren. | Flexbox |
| List group with badges | Eine Liste von Elementen mit einem Badge, um eine Anzahl anzuzeigen. | Flexbox, Box Alignment |
| Pagination | Links zu Inhaltsseiten (wie Suchergebnisse). | Flexbox, Box Alignment |
| Card | Eine Kartenkomponente, die in einem Raster von Karten angezeigt wird. | Grid Layout |
| Grid wrapper | Zum Ausrichten von Grid-Inhalten innerhalb eines zentralen Wrappers, während es auch erlaubt, dass Elemente ausbrechen. | CSS grid |
Beitrag eines Rezepts
Wie bei allen MDN-Inhalten würden wir uns freuen, wenn Sie ein Rezept im gleichen Format wie die oben gezeigten beitragen. Sehen Sie in dem Leitfaden zum Hinzufügen von Layout-Kochbuch-Rezepten nach einer Vorlage und Richtlinien zum Schreiben Ihres eigenen Beispiels.