8 Layout

8.1 Flexbox

Die Flexbox (Flexible Box Layout) ist eine CSS-Technik zur Erstellung flexibler und dynamischer Layouts. Sie bietet eine intuitive Möglichkeit, Elemente in einer Reihe oder Spalte anzuordnen und dabei ihren Platz flexibel zu verteilen, was besonders für responsive Designs geeignet ist. Mit Flexbox lassen sich Layouts erstellen, die sich an die Größe des Containers anpassen und einfach auszurichten sind.

8.1.1 Grundlagen von Flexbox

Flexbox basiert auf zwei Hauptkomponenten: einem Container und seinen Flex-Elementen. Um Flexbox zu aktivieren, setzt man die Eigenschaft display: flex; auf das übergeordnete Element (den Container). Alle direkten Kinder dieses Containers werden zu Flex-Elementen und verhalten sich entsprechend den Flexbox-Eigenschaften.

.container {
    display: flex;
}

8.1.2 Hauptachse und Kreuzachse

Flexbox orientiert sich an zwei Achsen:

• Hauptachse (main axis): Die Hauptachse ist die Hauptlinie, entlang der die Flex-Elemente angeordnet werden. Standardmäßig verläuft sie horizontal (von links nach rechts).
• Kreuzachse (cross axis): Die Kreuzachse verläuft senkrecht zur Hauptachse.

Die Flexbox-Eigenschaften ermöglichen die Steuerung von Ausrichtung und Verteilung sowohl auf der Haupt- als auch auf der Kreuzachse.

8.1.3 Wichtige Flexbox-Eigenschaften für den Container

8.1.3.1 flex-direction

Mit flex-direction wird die Richtung der Hauptachse festgelegt:

• row: Anordnung von links nach rechts (Standardwert).
• row-reverse: Anordnung von rechts nach links.
• column: Anordnung von oben nach unten.
• column-reverse: Anordnung von unten nach oben.

.container {
    flex-direction: row;
}

8.1.3.2 justify-content

Mit justify-content wird die Ausrichtung der Flex-Elemente entlang der Hauptachse gesteuert:

• flex-start: Elemente beginnen am Start der Achse (Standard).
• flex-end: Elemente werden am Ende der Achse ausgerichtet.
• center: Elemente werden zentriert.
• space-between: Elemente verteilen sich gleichmäßig mit Platz dazwischen.
• space-around: Elemente haben gleichmäßig Platz um sich herum.

.container {
    justify-content: center;
}

8.1.3.3 align-items

Mit align-items wird die Ausrichtung der Flex-Elemente entlang der Kreuzachse gesteuert:

• flex-start: Ausrichtung am Anfang der Kreuzachse.
• flex-end: Ausrichtung am Ende der Kreuzachse.
• center: Zentriert die Elemente entlang der Kreuzachse.
• stretch: Elemente dehnen sich über die gesamte Höhe des Containers (Standardwert).
• baseline: Elemente werden an der Grundlinie des Inhalts ausgerichtet.

.container {
    align-items: stretch;
}

8.1.3.4 flex-wrap

Standardmäßig passen sich Flex-Elemente in einer Reihe an, ohne umzubrechen. Mit flex-wrap kann das Verhalten so geändert werden, dass die Elemente in eine neue Zeile oder Spalte umgebrochen werden, wenn der Platz nicht ausreicht.

• nowrap: Kein Umbruch (Standard).
• wrap: Umbruch auf die nächste Zeile oder Spalte.
• wrap-reverse: Umbruch auf die nächste Zeile oder Spalte, in umgekehrter Richtung.

.container {
    flex-wrap: wrap;
}

8.1.3.5 align-content

align-content beeinflusst die Anordnung der Zeilen in einem mehrzeiligen Flex-Container (wenn flex-wrap: wrap; verwendet wird). Es funktioniert ähnlich wie justify-content, jedoch auf der Kreuzachse.

.container {
    align-content: space-between;
}

8.1.4 Wichtige Flexbox-Eigenschaften für Flex-Elemente

8.1.4.1 flex-grow

flex-grow definiert, wie viel zusätzlicher Platz ein Flex-Element im Verhältnis zu den anderen Flex-Elementen einnimmt. Ein Wert von 1 bedeutet, dass das Element Platz einnimmt, falls verfügbar, während 0 das Standardverhalten ist und keinen zusätzlichen Platz einnimmt.

.item {
    flex-grow: 1;
}

8.1.4.2 flex-shrink

flex-shrink steuert, wie stark ein Flex-Element bei Platzmangel verkleinert wird. Ein Wert von 1 (Standard) erlaubt dem Element zu schrumpfen, während 0 verhindert, dass es schrumpft.

.item {
    flex-shrink: 0;
}

8.1.4.3 flex-basis

flex-basis legt die Ausgangsgröße eines Elements entlang der Hauptachse fest. Es kann in absoluten Einheiten (z. B. px, em) oder relativen Einheiten (z. B. %) definiert werden. Flexbox verwendet flex-basis als Startwert, bevor flex-grow oder flex-shrink angewendet werden.

.item {
    flex-basis: 200px;
}

8.1.4.4 Kurzschreibweise: flex

Die Eigenschaft flex ist eine Kurzform für flex-grow, flex-shrink und flex-basis:

.item {
    flex: 1 1 200px; /* flex-grow: 1, flex-shrink: 1, flex-basis: 200px */
}

8.1.4.5 align-self

align-self überschreibt align-items für einzelne Flex-Elemente. Es ist nützlich, wenn nur bestimmte Elemente entlang der Kreuzachse abweichend ausgerichtet werden sollen.

.item {
    align-self: center;
}

8.1.5 Beispiel für ein flexibles Layout mit Flexbox

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
</div>

.container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    height: 300px;
    background-color: #f0f0f0;
}

.item {
    flex: 1 1 100px;
    padding: 10px;
    background-color: #007bff;
    color: white;
    margin: 5px;
    text-align: center;
}

In diesem Beispiel werden die Flex-Elemente gleichmäßig innerhalb des Containers verteilt. Sie passen sich an und brechen in eine neue Zeile um, falls nicht genügend Platz vorhanden ist.

8.2 CSS Grid

CSS Grid ist eine leistungsstarke Layout-Technik, die es ermöglicht, zweidimensionale Layouts zu erstellen und Elemente präzise auf einem Raster zu platzieren. Im Gegensatz zu Flexbox, das sich hauptsächlich für einzeilige Layouts eignet, unterstützt CSS Grid sowohl Zeilen- als auch Spaltenlayouts und bietet so mehr Flexibilität für komplexe Layouts.

8.2.1 Grundlagen von CSS Grid

CSS Grid basiert auf einem Container und seinen direkten Grid-Items. Der Container wird zu einem Grid, indem display: grid; gesetzt wird. Die Struktur des Rasters wird mit den Eigenschaften grid-template-columns und grid-template-rows definiert, die festlegen, wie viele Spalten und Zeilen das Raster haben soll und wie groß sie jeweils sind.

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
}

Hier wird ein Raster mit drei gleich großen Spalten erstellt.

8.2.2 Spalten und Zeilen definieren

8.2.2.1 grid-template-columns und grid-template-rows

Mit grid-template-columns und grid-template-rows wird das Raster in Spalten und Zeilen unterteilt. Jede Spalte oder Zeile kann in festen (px, em) oder flexiblen Einheiten (fr, %) definiert werden.

.container {
    display: grid;
    grid-template-columns: 200px 1fr 2fr;
    grid-template-rows: 100px auto;
}

In diesem Beispiel besteht das Grid aus drei Spalten: die erste ist 200px breit, die zweite nimmt den verbleibenden Raum (1fr) ein, und die dritte nimmt doppelt so viel Platz wie die zweite Spalte (2fr).

8.2.3 Gap (Abstände zwischen Grid-Items)

Die Eigenschaft gap definiert den Abstand zwischen den Grid-Items. Sie kann sowohl für Spalten als auch für Zeilen verwendet werden und ersetzt die veralteten Eigenschaften grid-column-gap und grid-row-gap.

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

Hier wird ein Abstand von 20px zwischen den Grid-Items eingefügt.

8.2.4 Grid-Item-Positionierung

Grid-Items können innerhalb des Rasters durch Start- und Endpositionen gezielt platziert und über mehrere Spalten oder Zeilen hinweg erstreckt werden.

8.2.4.1 grid-column und grid-row

Die Eigenschaften grid-column und grid-row legen die Start- und Endposition für ein Grid-Item fest:

.item1 {
    grid-column: 1 / 3; /* Beginnt in Spalte 1 und erstreckt sich bis Spalte 3 */
    grid-row: 1 / 2;    /* Beginnt in Zeile 1 und endet in Zeile 2 */
}

8.2.4.2 grid-column-start, grid-column-end, grid-row-start und grid-row-end

Alternativ können Start- und Endpositionen detailliert festgelegt werden:

.item1 {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
}

8.2.5 grid-template-areas

Mit grid-template-areas können benannte Rasterbereiche erstellt werden, wodurch sich die Positionierung der Grid-Items einfacher und übersichtlicher gestalten lässt. Jedes Grid-Item wird einem benannten Bereich (grid-area) zugewiesen, der im Layout verwendet wird.

.container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
        "header header header"
        "sidebar main main"
        "footer footer footer";
}

.header {
    grid-area: header;
}

.sidebar {
    grid-area: sidebar;
}

.main {
    grid-area: main;
}

.footer {
    grid-area: footer;
}

In diesem Beispiel wird ein Layout mit benannten Bereichen erstellt: header, sidebar, main und footer. Die Grid-Items füllen die entsprechenden Bereiche.

8.2.6 Responsive Layouts mit CSS Grid

CSS Grid eignet sich hervorragend für responsive Designs. Mit Medienabfragen können Spalten und Zeilen angepasst werden, sodass das Layout flexibel bleibt.

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

@media (max-width: 768px) {
    .container {
        grid-template-columns: 1fr;
    }
}

In diesem Beispiel wechselt das Layout von einem dreispaltigen zu einem einspaltigen Layout, wenn die Bildschirmbreite 768px oder weniger beträgt.

8.2.7 Weitere nützliche CSS Grid-Eigenschaften

8.2.7.1 auto-fit und auto-fill

Die Funktionen auto-fit und auto-fill in Kombination mit der Einheit minmax() ermöglichen die automatische Anpassung des Rasters an die Größe des Containers:

.container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

Hier werden so viele Spalten wie möglich eingefügt, wobei jede Spalte eine Mindestbreite von 150px und eine maximale Breite von 1fr hat.

• auto-fit: Füllt den Container mit so vielen Spalten, wie Platz hat, und lässt leere Spalten weg.
• auto-fill: Fügt ebenfalls Spalten hinzu, jedoch werden leere Spalten beibehalten, auch wenn sie nicht vollständig gefüllt sind.

8.2.8 Zusammenfassung

CSS Grid bietet eine vielseitige und präzise Möglichkeit, zweidimensionale Layouts zu erstellen. Durch Eigenschaften wie grid-template-columns, grid-template-rows, grid-template-areas, sowie die Möglichkeit, Grid-Items gezielt zu positionieren und zu skalieren, lassen sich sowohl einfache als auch komplexe Layouts effizient gestalten. CSS Grid ist besonders nützlich für responsive Webseiten und bietet einen flexiblen Ansatz zur Kontrolle über das gesamte Layout. In den nächsten Kapiteln werden weitere fortgeschrittene Techniken zur Layout-Gestaltung behandelt.

8.3 Positionierung (relative, absolute, fixed, sticky)

CSS bietet verschiedene Positionierungsmethoden, um Elemente auf einer Webseite präzise zu platzieren. Die Positionierung wird durch die position-Eigenschaft gesteuert, die Werte wie relative, absolute, fixed und sticky erlaubt. Jede dieser Methoden hat besondere Eigenschaften und Anwendungsfälle, die es ermöglichen, Layouts dynamisch und flexibel zu gestalten.

8.3.1 position: static

Dies ist die Standardpositionierung in CSS. Bei static werden Elemente in der natürlichen Reihenfolge des HTML-Dokuments platziert, ohne dass sie verschoben werden können.

.element {
    position: static; /* Standardwert */
}

8.3.2 position: relative

Mit position: relative bleibt das Element in seinem normalen Dokumentfluss, kann jedoch mit den Eigenschaften top, right, bottom und left relativ zu seiner normalen Position verschoben werden. Der Platz, den das Element im Layout einnimmt, bleibt unverändert, auch wenn es visuell verschoben wird.

.element {
    position: relative;
    top: 20px; /* Verschiebt das Element 20px nach unten */
    left: 10px; /* Verschiebt das Element 10px nach rechts */
}

In diesem Beispiel bleibt das Element im normalen Dokumentfluss, wird jedoch optisch um 20px nach unten und 10px nach rechts verschoben.

8.3.3 position: absolute

Bei position: absolute wird das Element aus dem normalen Dokumentfluss entfernt und relativ zum nächsten übergeordneten Element mit position: relative, absolute, fixed oder sticky positioniert. Wenn kein solches übergeordnetes Element vorhanden ist, bezieht es sich auf den body.

.container {
    position: relative;
}

.element {
    position: absolute;
    top: 0;
    left: 0;
}

In diesem Beispiel wird das .element relativ zum .container-Element in die obere linke Ecke positioniert, da .container auf position: relative gesetzt wurde.

8.3.4 position: fixed

Ein Element mit position: fixed bleibt an einer festen Position relativ zum Ansichtsfenster (Viewport) und bewegt sich nicht mit dem Scrollen der Seite. Dies ist ideal für feste Header, Fußzeilen oder Schaltflächen.

.element {
    position: fixed;
    bottom: 10px;
    right: 10px;
}

In diesem Beispiel bleibt das Element immer in der unteren rechten Ecke des Bildschirms, auch beim Scrollen.

8.3.5 position: sticky

Ein sticky-Element verhält sich wie ein relative-Element, bis eine bestimmte Scroll-Position erreicht ist. Ab diesem Punkt bleibt es fest an der Scroll-Position haften. position: sticky erfordert die Angabe von mindestens einer der Eigenschaften top, right, bottom oder left, um zu funktionieren.

.element {
    position: sticky;
    top: 0;
}

In diesem Beispiel bleibt das Element im Fluss des Dokuments, bis es an den oberen Rand des Viewports scrollt und dort „klebt“. Es bleibt dann an dieser Position, bis sein übergeordnetes Element zu Ende gescrollt ist.

8.3.6 Z-Index und Stapelreihenfolge

Mit der z-index-Eigenschaft kann die Stapelreihenfolge (Z-Reihenfolge) von Elementen festgelegt werden, um zu steuern, welches Element im Vordergrund oder Hintergrund angezeigt wird. Ein höherer z-index bedeutet, dass das Element weiter vorne angezeigt wird.

.element1 {
    position: absolute;
    z-index: 1;
}

.element2 {
    position: absolute;
    z-index: 2; /* Überlagert .element1 */
}

8.3.7 Vergleich der Positionierungsarten

8.4 Floats und Clearfix

Floats sind eine ältere CSS-Technik, die ursprünglich entwickelt wurde, um Text um Bilder herum zu fließen. Sie wurden später auch genutzt, um Layouts zu erstellen, bevor moderne Layout-Methoden wie Flexbox und Grid verfügbar waren. Float-Layouts haben jedoch Einschränkungen und benötigen oft eine Clearfix-Lösung, um Layout-Probleme zu beheben.

8.4.1 float

Die float-Eigenschaft bewirkt, dass ein Element entweder links oder rechts von seinem Container schwebt und der folgende Inhalt den leeren Raum neben dem Element einnimmt.

8.4.1.1 Werte von float

• left: Das Element schwebt links im Container und der nachfolgende Inhalt fließt rechts daran vorbei.
• right: Das Element schwebt rechts im Container und der nachfolgende Inhalt fließt links daran vorbei.
• none: Standardwert, das Element wird normal im Dokumentfluss dargestellt.

8.4.1.2 Beispiel für float

.img {
    float: left;
    margin-right: 10px;
}

Hier wird das Bild nach links verschoben, sodass der Text rechts davon fließt.

<img src="bild.jpg" class="img" alt="Beispielbild">
<p>Dies ist ein Absatz, der rechts neben dem Bild fließt.</p>

8.4.2 Layouts mit Float

Floats wurden oft genutzt, um mehrspaltige Layouts zu erstellen, indem mehrere Elemente nebeneinander geschoben wurden. Hier ein einfaches Beispiel für ein zweispaltiges Layout:

.sidebar {
    float: left;
    width: 30%;
}

.main-content {
    float: left;
    width: 70%;
}

8.4.3 Probleme mit Floats

Ein häufiges Problem bei Float-Layouts ist das „Zusammenbrechen“ des übergeordneten Containers, wenn alle darin enthaltenen Elemente floaten. Da float-Elemente aus dem normalen Dokumentfluss entfernt werden, „sieht“ der Container sie nicht und seine Höhe wird auf 0 gesetzt, wenn keine anderen Inhalte vorhanden sind.

8.4.4 Clearfix

Die Clearfix-Technik wird verwendet, um dieses Problem zu lösen. Mit Clearfix kann ein Container gezwungen werden, seine schwebenden Kinder zu berücksichtigen und sich ihrer Höhe anzupassen.

8.4.4.1 Die Clearfix-Methode

Die Clearfix-Technik fügt dem übergeordneten Container ein Pseudo-Element hinzu, das die schwebenden Elemente „cleart“ (d. h. die Float-Eigenschaften aufhebt).

.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

Um den Clearfix zu nutzen, wird die .clearfix-Klasse auf den übergeordneten Container angewendet.

8.4.4.2 Beispiel mit Clearfix

<div class="container clearfix">
    <div class="sidebar">Sidebar-Inhalt</div>
    <div class="main-content">Hauptinhalt</div>
</div>

In diesem Beispiel wird die .clearfix-Klasse auf .container angewendet, sodass dieser die Höhe der gefloateten Elemente berücksichtigt.

8.4.5 clear

Die clear-Eigenschaft wird verwendet, um das „Überfließen“ eines gefloateten Elements zu verhindern und sicherzustellen, dass ein Element erst nach dem vorherigen floatenden Element angezeigt wird.

• left: Setzt das Element unter alle links floatenden Elemente.
• right: Setzt das Element unter alle rechts floatenden Elemente.
• both: Setzt das Element unter alle floatenden Elemente (links und rechts).
• none: Standardwert, kein Clear-Effekt.

.footer {
    clear: both;
}

In diesem Beispiel wird .footer unterhalb aller floatenden Elemente angezeigt, unabhängig davon, ob sie links oder rechts floaten.