CSS – Layout und Flexbox

1. Was bedeutet Layout in CSS?

Das Layout beschreibt die Anordnung und Positionierung der Elemente auf einer Webseite.

Mit CSS können Elemente nebeneinander, untereinander, zentriert oder an bestimmten Positionen dargestellt werden.

2. Die Eigenschaft display

Die CSS-Eigenschaft display bestimmt, wie ein Element im Layout dargestellt wird.

3. display: block

Blockelemente beginnen normalerweise in einer neuen Zeile und nehmen die verfügbare Breite ein.

CSS-Code

.box {
    display: block;
}

Ergebnis

4. display: inline

Inline-Elemente werden innerhalb einer Zeile dargestellt. width und height wirken bei normalen Inline-Elementen nicht wie bei Blockelementen.

CSS-Code

span {
    display: inline;
}

Ergebnis

5. display: inline-block

Inline-block-Elemente können nebeneinander stehen. Gleichzeitig lassen sich Breite und Höhe festlegen.

CSS-Code

.box {
    display: inline-block;
    width: 120px;
    padding: 12px;
}

Ergebnis

6. display: none

Mit display: none wird ein Element vollständig aus dem Layout entfernt.

.versteckt {
    display: none;
}

7. Die Eigenschaft position

Mit position kann bestimmt werden, wie ein Element positioniert wird.

8. position: relative

Ein relativ positioniertes Element kann mit top, right, bottom und left verschoben werden. Sein ursprünglicher Platz bleibt dabei erhalten.

CSS-Code

.box {
    position: relative;
    left: 20px;
    top: 10px;
}

Ergebnis

9. position: absolute

Ein absolut positioniertes Element wird aus dem normalen Dokumentfluss herausgenommen.

Häufig wird ein Elternelement mit position: relative als Bezugselement verwendet.

CSS-Code

.container {
    position: relative;
}

.box {
    position: absolute;
    top: 45px;
    right: 15px;
}

Ergebnis

10. position: fixed

Mit position: fixed kann ein Element an einer festen Bildschirmposition bleiben, auch wenn die Seite gescrollt wird.

CSS-Code

.button {
    position: fixed;
    bottom: 20px;
    right: 20px;
}

Ein typisches Beispiel ist eine Schaltfläche zum Zurückkehren an den Seitenanfang.

11. position: sticky

Ein sticky-Element bewegt sich zunächst im normalen Layout. Beim Scrollen kann es an einer festgelegten Position haften bleiben.

CSS-Code

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

Interaktives Beispiel

12. z-index – Ebenenreihenfolge

Mit z-index kann die Stapelreihenfolge überlappender Elemente innerhalb ihres Stacking-Kontexts beeinflusst werden.

CSS-Code

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

.box2 {
    position: absolute;
    z-index: 2;
}

Ergebnis

Im Beispiel liegt die rote Box vor der blauen Box.

13. Was ist Flexbox?

Flexbox ist ein CSS-Layoutsystem, mit dem Elemente flexibel in einer Zeile oder Spalte angeordnet werden können.

Flexbox eignet sich besonders für Navigationen, Karten, Buttons und kleinere Layoutbereiche.

CSS-Code

.container {
    display: flex;
    gap: 12px;
}

Ergebnis

14. flex-direction

Mit flex-direction wird die Richtung der Flex-Elemente bestimmt.

CSS-Code

.container {
    display: flex;
    flex-direction: column;
}

Ergebnis

15. justify-content

Mit justify-content werden Flex-Elemente entlang der Hauptachse ausgerichtet.

Beispiel: center

.container {
    display: flex;
    justify-content: center;
}

Beispiel: space-between

.container {
    display: flex;
    justify-content: space-between;
}

16. align-items

align-items richtet Flex-Elemente entlang der Querachse aus.

CSS-Code

.container {
    display: flex;
    align-items: center;
    min-height: 140px;
}

Ergebnis

17. flex-wrap

Mit flex-wrap können Flex-Elemente bei Platzmangel in die nächste Zeile wechseln.

CSS-Code

.container {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

Ergebnis

18. flex-grow und flex

Mit flex-grow wird festgelegt, wie Flex-Elemente zusätzlichen verfügbaren Platz aufteilen.

CSS-Code

.box1 {
    flex-grow: 1;
}

.box2 {
    flex-grow: 2;
}

Wenn beide Elemente die gleichen Ausgangsbedingungen haben, erhält das zweite Element einen größeren Anteil des freien Platzes.

Ergebnis

19. gap – Abstand zwischen Elementen

Die Eigenschaft gap legt Abstände zwischen Flex- oder Grid-Elementen fest.

CSS-Code

.container {
    display: flex;
    gap: 20px;
}

Im Unterschied zu margin wird der Abstand direkt zwischen den Flex-Elementen definiert.

20. Praktisches Beispiel: Navigation

Flexbox wird häufig für horizontale Navigationsleisten verwendet.

HTML-Code

<nav class="navigation">
    <a href="#">Startseite</a>
    <a href="#">HTML</a>
    <a href="#">CSS</a>
    <a href="#">PHP</a>
</nav>

CSS-Code

.navigation {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    background: #1959a6;
    padding: 12px;
}

.navigation a {
    color: white;
    text-decoration: none;
    padding: 9px 14px;
}

Ergebnis

21. Praktisches Beispiel: Sidebar und Inhalt

Mit Flexbox können eine Seitenleiste und ein Inhaltsbereich nebeneinander angeordnet werden.

CSS-Code

.layout {
    display: flex;
    gap: 15px;
}

.sidebar {
    flex: 0 0 180px;
}

.content {
    flex: 1;
    min-width: 0;
}

Ergebnis

22. Praktische Übungen

display: flex;

.container {
    display: flex;
    flex-direction: column;
}

.container {
    display: flex;
    justify-content: center;
}

.container {
    display: flex;
    gap: 20px;
}

.parent {
    position: relative;
}

.child {
    position: absolute;
    top: 10px;
    right: 20px;
}

flex-wrap: wrap;

display: none;

z-index: 2;

23. Zusammenfassung

Mit display wird bestimmt, wie HTML-Elemente dargestellt werden. Mit position können Elemente relativ, absolut, fest oder sticky positioniert werden.

Flexbox ermöglicht flexible Layouts mit Zeilen und Spalten. Besonders wichtig sind flex-direction, justify-content, align-items, flex-wrap und gap.

Flexbox eignet sich besonders für Navigationen, Karten und kleinere Layoutbereiche. Für komplexere zweidimensionale Layouts steht CSS Grid zur Verfügung.