Jedes HTML-Element ist eine Box. Wie diese Boxen sich verhalten — Abstände, Rahmen, Anordnung — bestimmt das gesamte Layout deiner Seite.
Jedes Element auf einer Webseite wird vom Browser als rechteckige Box behandelt. Diese Box besteht aus vier Schichten — von innen nach außen.
Der eigentliche Inhalt — Text, Bilder, etc.
Die Größe wird durch width und height bestimmt. Standardmäßig wächst der Content mit seinem Inhalt.
Innenabstand — Raum zwischen Inhalt und Rand.
padding: 20px; /* alle Seiten */
padding: 10px 20px; /* oben/unten links/rechts */
padding-top: 10px; /* nur oben */
Padding hat die Hintergrundfarbe des Elements — es „gehört" zum Element.
Der sichtbare Rahmen um das Element.
border: 2px solid #E63946;
border-radius: 8px; /* runde Ecken */
border-bottom: 3px dashed blue;
Border hat drei Teile: Dicke, Stil (solid/dashed/dotted) und Farbe.
Außenabstand — Raum zwischen diesem und anderen Elementen.
margin: 20px;
margin: 0 auto; /* horizontal zentrieren! */
margin-bottom: 2rem;
Margin Collapse: Vertikale Margins zweier Nachbar-Elemente überlappen sich — es gilt der größere!
Mit border-box zählen Padding + Border zur angegebenen Breite dazu.
Flexbox ist das mächtigste CSS-Tool für eindimensionale Layouts. Mit wenigen Zeilen Code kannst du Elemente horizontal oder vertikal ausrichten, verteilen und umordnen.
Ohne Flex: untereinander. Mit Flex: nebeneinander!
Hauptachse festlegen: row oder column.
flex-direction: row; /* horizontal (Standard) */
flex-direction: column; /* vertikal */
flex-direction: row-reverse; /* umgekehrt */
Die Hauptachse bestimmt, in welche Richtung die Kinder angeordnet werden.
Verteilung entlang der Hauptachse.
justify-content: flex-start; /* links */
justify-content: center; /* mitte */
justify-content: space-between; /* gleichmäßig */
justify-content: space-around; /* mit Rand */
space-between ist besonders nützlich für Navigationen!
Ausrichtung entlang der Querachse.
align-items: stretch; /* volle Höhe (Standard) */
align-items: center; /* vertikal zentriert */
align-items: flex-start; /* oben */
align-items: flex-end; /* unten */
Klassiker: display: flex; justify-content: center; align-items: center; = perfekte Zentrierung!
Sollen Kinder umbrechen, wenn kein Platz ist?
flex-wrap: nowrap; /* kein Umbruch (Standard) */
flex-wrap: wrap; /* Umbruch in nächste Zeile */
Ohne wrap werden Kinder zusammengequetscht. Mit wrap entsteht ein flexibles Grid.
Die innerste Schicht steht oben, die äußerste unten.
Nutze den Playground oben und finde die richtige Kombination für diese Layouts:
Elemente gleichmäßig verteilt, mit Abstand zum Rand.
display: flex;
justify-content: space-around;
align-items: center;
space-around verteilt gleichmäßig und lässt auch am Rand Platz.
Elemente vertikal gestapelt und horizontal zentriert.
display: flex;
flex-direction: column;
align-items: center;
Bei column dreht sich die Achse — align-items wird zur horizontalen Ausrichtung!
Perfekt zentriert — horizontal UND vertikal.
display: flex;
justify-content: center;
align-items: center;
/* Container braucht eine Höhe! */
min-height: 100vh;
Der „Holy Grail" des CSS: zwei Zeilen für perfekte Zentrierung. Funktioniert aber nur, wenn der Container eine definierte Höhe hat!
7 Fragen — von Margin Collapse bis justify-content.
box-sizing: border-box?display: flex?„Öffnet die DevTools (F12) auf einer beliebigen Webseite, wählt ein Element und sucht das Boxmodell-Diagramm. Verändert Padding und Margin live — was passiert mit dem Layout der Seite?"
Praxis-Übung in Zweierteams (5 Minuten). Teilt eure spannendsten Entdeckungen.