05_FlexboxAdvanced

Code-Dateien

DateinameAktion
CODECode_FlexboxAdvanced.zipDownload

Videos

DateinameAktion
VIDEOVideo_FlexAdvanced_DAbspielen

Lernmaterialien

Flexbox und Grid in CSS

Mit CSS kann man nicht nur Farben, Schriften und Abstände festlegen, sondern auch das Layout einer Webseite steuern. Zwei der wichtigsten modernen Layout-Techniken sind:

  • Flexbox

  • CSS Grid

Beide helfen dabei, Elemente sauber und flexibel anzuordnen. Sie verfolgen aber unterschiedliche Ziele:

  • Flexbox eignet sich vor allem für eine Richtung: entweder Zeile oder Spalte

  • Grid eignet sich für zweidimensionale Layouts: Zeilen und Spalten gleichzeitig

1. Flexbox

Was ist Flexbox?

Flexbox steht für Flexible Box Layout. Es ist ein CSS-Modell, mit dem Elemente innerhalb eines Containers flexibel verteilt und ausgerichtet werden können.

Flexbox ist besonders nützlich, wenn man:

  • Elemente nebeneinander anordnen möchte

  • Abstände automatisch verteilen will

  • Inhalte vertikal oder horizontal zentrieren möchte

  • auf unterschiedliche Bildschirmgrößen reagieren will

Grundidee von Flexbox

Es gibt immer:

  • einen Flex-Container

  • darin enthaltene Flex-Items

Sobald ein Eltern-Element display: flex; bekommt, werden seine direkten Kindelemente zu Flex-Items.

01_index.html

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox Beispiel</title>
  <style>
    .container {
      display: flex;
      gap: 10px;
      padding: 20px;
      border: 2px solid #333;
    }

    .box {
      width: 80px;
      height: 80px;
      background-color: lightblue;
      border: 1px solid #000;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24px;
      font-family: Arial, sans-serif;
    }
  </style>
</head>
<body>

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

</body>
</html>

Ergebnis: Die drei Boxen stehen automatisch nebeneinander.

justify-content

Hauptachse

Flexbox arbeitet mit zwei Achsen:

  • Hauptachse (main axis) Die Richtung, in der die Elemente angeordnet werden.

  • Querachse (cross axis) ie Achse senkrecht zur Hauptachse.

Wenn flex-direction: row; gesetzt ist:

  • Hauptachse: horizontal (→)

  • Querachse: vertikal (↓)

Wenn flex-direction: column; gesetzt ist:

  • Hauptachse = vertikal (↓)

  • Querachse = horizontal (→)

.container {
  display: flex;
}

Aktiviert Flexbox.

flex-direction

flex-direction

Legt fest, in welche Richtung die Elemente angeordnet werden.

Mögliche Werte:

  • row → von links nach rechts

  • row-reverse → von rechts nach links

  • column → von oben nach unten

  • column-reverse → von unten nach oben

Beispiel

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

Die Elemente stehen nebeneinander.

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

Die Elemente stehen untereinander.

justify-content

justify-content

Richtet die Elemente auf der Hauptachse aus.

Wichtige Werte:

  • flex-start → am Anfang

  • flex-end → am Ende

  • center → zentriert

  • stretch → verwendet den Bereich

  • space-between → erster links, letzter rechts, dazwischen gleichmäßig

  • space-around → um jedes Element herum Abstand

  • space-evenly → alle Abstände gleich groß

001.jpg

02_index.html

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox Beispiel</title>
  <style>
    .container {
      display: flex;
      height: 800px;
      flex-direction: row;
      justify-content: stretch;
      gap: 10px;
      padding: 20px;
      border: 2px solid #333;
    }

    .box {
      width: 80px;
      background-color: lightblue;
      border: 1px solid #000;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24px;
      font-family: Arial, sans-serif;
    }
  </style>
</head>
<body>

  <div class="container">
    <div class="box" style="height: 100px;">1</div>
    <div class="box" style="height: 300px;">2</div>
    <div class="box">3</div>
  </div>

</body>
</html>

Ändere:

      flex-direction: row;
      justify-content: stretch;

align-items

align-items

Richtet die Elemente auf der Querachse aus.

Wichtige Werte:

  • stretch → Elemente werden gestreckt

  • flex-start → oben / links

  • flex-end → unten / rechts

  • center → mittig

  • baseline → an der Textgrundlinie

Wenn flex-direction: row;

Eigenschaft Wirkung
justify-content horizontal
align-items vertikal

Wenn flex-direction: column;

Eigenschaft Wirkung
justify-content vertikal
align-items horizontal

03_index.html

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox Beispiel</title>
  <style>
    .container {
      display: flex;
      height: 800px;
      flex-direction: row;
      justify-content: flex-end;
      align-items: center;
      gap: 10px;
      padding: 20px;
      border: 2px solid #333;
    }

    .box {
      width: 80px;
      background-color: lightblue;
      border: 1px solid #000;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24px;
      font-family: Arial, sans-serif;
    }
  </style>
</head>
<body>

  <div class="container">
    <div class="box" style="height: 100px;">1</div>
    <div class="box" style="height: 400px;">2</div>
    <div class="box" style="height: 300px;">3</div>
  </div>

</body>
</html>

Ändere:

      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      align-items: center;
002.jpg

flex-wrap

flex-wrap

Standardmäßig versucht Flexbox, alle Elemente in eine Zeile zu setzen. Mit flex-wrap dürfen die Elemente umbrechen.

Werte:

  • nowrap → kein Umbruch

  • wrap → Umbruch erlaubt

  • wrap-reverse → Umbruch in umgekehrter Richtung

Beispiel

04_index.html

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox mit flex-wrap</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
    }

    .container {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      padding: 20px;
      border: 2px solid #333;
      background-color: #f5f5f5;
    }

    .box {
      width: 200px;
      height: 80px;
      background-color: lightblue;
      border: 1px solid #000;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24px;
    }
  </style>
</head>
<body>

  <h1>Beispiel für flex-wrap: wrap</h1>
  <p>
    Die Boxen werden nebeneinander angeordnet. Wenn im Container nicht genug Platz ist,
    rutschen sie mit <code>flex-wrap: wrap;</code> in die nächste Zeile.
  </p>

  <div class="container">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
  </div>

</body>
</html>

Wenn nicht genug Platz da ist, rutschen Elemente in die nächste Zeile.

gap

Legt den Abstand zwischen den Flex-Items fest.

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

Das ist meist sauberer als margin an jedem einzelnen Element.

flex-grow

flex-grow

Bestimmt, ob und wie stark ein Element den verfügbaren Platz ausfüllt.

05_index.html

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox mit flex-grow</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
    }

    .container {
      display: flex;
      width: 800px;
      gap: 10px;
      padding: 20px;
      border: 2px solid #333;
      background-color: #f5f5f5;
    }

    .box {
      height: 80px;
      background-color: lightblue;
      border: 1px solid #000;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24px;
    }

    .box1 {
      flex-grow: 0;
      flex-basis: 100px;
    }

    .box2 {
      flex-grow: 2;
      flex-basis: 400px;
    }

    .box3 {
      flex-grow: 1;
      flex-basis: 200px;
    }
  </style>
</head>
<body>

  <h1>Beispiel für flex-grow</h1>
  <p>
    <code>.box1</code> und <code>.box3</code> bekommen jeweils <code>flex-grow: 1;</code>.<br>
    <code>.box2</code> bekommt <code>flex-grow: 2;</code> und wird deshalb breiter.
  </p>

  <div class="container">
    <div class="box box1">1</div>
    <div class="box box2">2</div>
    <div class="box box3">3</div>
  </div>

</body>
</html>

Gegeben:

.box1 { flex-grow: 0; flex-basis: 100px; }
.box2 { flex-grow: 2; flex-basis: 400px; }
.box3 { flex-grow: 1; flex-basis: 200px; }

Verfügbarer Platz:

  • Container: 800px

  • Padding: 40px

  • Gaps: 20px

800 - 40 - 20 = 740px

Basisgrößen:

100 + 400 + 200 = 700px

Freier Platz:

740 - 700 = 40px

Grow:

Box grow
1 0 ❌
2 2
3 1

👉 Summe = 3 (Box1 zählt nicht mit!)

👉 Verteilung des freien Platzes (40px)

  • Box1 → 0px

  • Box2 → 2/3 → ~26.67px

  • Box3 → 1/3 → ~13.33px

✅ Endgrößen

Box Basis Wachstum Ergebnis
1 100px +0px 100px
2 400px +26.67px ≈ 426.7px
3 200px +13.33px ≈ 213.3px

flex-shrink

Bestimmt, wie stark ein Element schrumpfen darf.

.box {
  flex-shrink: 1;
}

Standardmäßig dürfen Elemente schrumpfen, wenn der Platz knapp wird.

05_shrink.html

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Flexbox flex-shrink Beispiel</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
    }

    .container {
      display: flex;
      width: 500px; /* bewusst zu klein! */
      border: 2px solid black;
      gap: 10px;
      padding: 10px;
    }

    .box {
      background-color: lightcoral;
      border: 1px solid black;
      text-align: center;
      padding: 20px;
      font-size: 20px;
      color: white;
    }

    .box1 {
      flex-shrink: 1;
      flex-basis: 200px;
    }

    .box2 {
      flex-shrink: 1;
      flex-basis: 300px;
    }

    .box3 {
      flex-shrink: 2; /* schrumpft stärker */
      flex-basis: 200px;
    }
  </style>
</head>
<body>

<h2>Beispiel für flex-shrink</h2>

<p>
Container ist zu klein → Boxen müssen schrumpfen.<br>
Box 3 hat <strong>flex-shrink: 2</strong> → schrumpft stärker!
</p>

<div class="container">
  <div class="box box1">Box 1</div>
  <div class="box box2">Box 2</div>
  <div class="box box3">Box 3</div>
</div>

</body>
</html>

Basisgrößen:

200 + 300 + 200 = 700px

Container:

Container: 500px
Padding:   10px links + 10px rechts = 20px
Gaps:      2 × 10px = 20px
500 - 20 - 20 = 460px → zu wenig Platz

Es fehlen 240px

🔹 Schritt 3: Shrink-Faktoren

box gewicht faktor größe größe
1 200*1=200 200/900=0.22 200-(0.22*240) 147
2 300*1=300 300/900=0.33 300-(0.33*240) 220
3 400*2=800 400/900=0.44 200-(0.44*240) 93
Summe 900 1 460

flex-basis

Legt die Ausgangsgröße eines Flex-Items fest.

.box {
  flex-basis: 200px;
}

Das Element startet mit 200 Pixel Breite, bevor der übrige Platz verteilt wird.

Kurzschreibweise: flex

Die drei Eigenschaften lassen sich kombinieren:

.box {
  flex: 1 1 200px;
}

Bedeutung:

  • flex-grow: 1

  • flex-shrink: 1

  • flex-basis: 200px

align-self

Richtet ein einzelnes Flex-Item anders aus als die übrigen.

.box2 {
  align-self: flex-end;
}

Nur diese Box wird anders positioniert.

Einsatzgebiete

Flexbox ist ideal für:

  • Navigationsleisten

  • Menüs

  • Buttons in einer Reihe

  • Kartenlayouts in einer Zeile

  • horizontales oder vertikales Zentrieren

  • kleine bis mittlere Layout-Bereiche

<nav class="nav">
  <a href="#">Start</a>
  <a href="#">Über uns</a>
  <a href="#">Kontakt</a>
</nav>
.nav {
  display: flex;
  justify-content: space-around;
  background-color: lightgray;
  padding: 15px;
}

Die Links werden gleichmäßig verteilt.

06_index.html

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Navigation mit Flexbox</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
    }

    .nav {
      display: flex;
      justify-content: space-around;
      background-color: lightgray;
      padding: 15px;
    }

    .nav a {
      text-decoration: none;
      color: black;
      font-size: 18px;
      font-weight: bold;
    }

    .nav a:hover {
      color: darkblue;
    }
  </style>
</head>
<body>

  <nav class="nav">
    <a href="#">Start</a>
    <a href="#">Über uns</a>
    <a href="#">Kontakt</a>
  </nav>

</body>
</html>

Vorteile von Flexbox

  • leicht verständlich für lineare Layouts

  • einfaches Zentrieren

  • flexible Verteilung von Platz

  • gut für responsive Designs

  • wenig Code für typische Anordnungen

Nachteile von Flexbox

  • weniger geeignet für komplexe Seitenlayouts

  • arbeitet primär in einer Dimension

  • bei großen Rasterlayouts oft unübersichtlich

Flex Seite

07_index.html

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Flexbox Layout</title>

  <style>
    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      font-family: Arial, sans-serif;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }

    header {
      background-color: #222;
      color: white;
      padding: 20px;
    }

    nav {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 20px;
      flex-wrap: wrap;
    }

    .menu {
      display: flex;
      gap: 15px;
      flex-wrap: wrap;
    }

    .menu a {
      color: white;
      text-decoration: none;
    }

    .banner {
      background-color: lightblue;
      padding: 60px 20px;
      text-align: center;
    }

    main {
      flex: 1;
      padding: 20px;
    }

    .cards {
      display: flex;
      gap: 20px;
      flex-wrap: wrap;
    }

    .card {
      flex: 1 1 250px;
      background-color: #f2f2f2;
      border: 1px solid #ccc;
      padding: 20px;
      border-radius: 8px;
    }

    footer {
      background-color: #222;
      color: white;
      text-align: center;
      padding: 20px;
    }
  </style>
</head>

<body>

  <header>
    <nav>
      <h2>Meine Seite</h2>

      <div class="menu">
        <a href="#">Start</a>
        <a href="#">Produkte</a>
        <a href="#">Über uns</a>
        <a href="#">Kontakt</a>
      </div>
    </nav>
  </header>

  <section class="banner">
    <h1>Willkommen auf meiner Webseite</h1>
    <p>Ein flexibles Layout mit vielen Cards</p>
  </section>

  <main>
    <h2>Unsere Inhalte</h2>

    <div class="cards">

      <div class="card">
        <h3>Webentwicklung</h3>
        <p>HTML, CSS und JavaScript bilden die Grundlage moderner Webseiten.</p>
      </div>

      <div class="card">
        <h3>Datenbanken</h3>
        <p>Relationale Datenbanken wie Oracle oder MySQL speichern strukturierte Daten effizient.</p>
      </div>

      <div class="card">
        <h3>Netzwerke</h3>
        <p>TCP/IP ist das Fundament für die Kommunikation im Internet.</p>
      </div>

      <div class="card">
        <h3>Cloud Computing</h3>
        <p>Dienste wie AWS oder Azure ermöglichen skalierbare Anwendungen.</p>
      </div>

      <div class="card">
        <h3>Künstliche Intelligenz</h3>
        <p>Machine Learning wird in vielen Bereichen eingesetzt, z. B. Bilderkennung.</p>
      </div>

      <div class="card">
        <h3>Cybersecurity</h3>
        <p>Schutz von Daten und Systemen ist heute wichtiger denn je.</p>
      </div>

      <div class="card">
        <h3>Mobile Apps</h3>
        <p>Apps für iOS und Android werden oft mit Frameworks entwickelt.</p>
      </div>

      <div class="card">
        <h3>DevOps</h3>
        <p>Automatisierung von Deployment und Betrieb beschleunigt die Entwicklung.</p>
      </div>

    </div>
  </main>

  <footer>
    © 2026 Meine Webseite
  </footer>

</body>
</html>
003.png

Grundstruktur

Du hast mehrere Flex-Container:

  • body → steuert die Seitenstruktur (Header–Main–Footer)

  • nav → steuert das Menü

  • .cards → steuert die Card-Anordnung

Flex-Container: body

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

👉 Flex-Items hier sind:

  • header

  • .banner

  • main

  • footer

Flex-Container: main

main {
  flex: 1;
}

👉 Bedeutet:

  • flex-grow: 1 → nimmt den restlichen Platz ein

  • Ergebnis:

    • Footer bleibt unten

    • Main „dehnt sich“

👉 Klassisches Layout:

Header
Banner
Main  ← wächst
Footer (unten fixiert durch Layout)

Flex-Container: nav

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

👉 Flex-Items:

  • Logo (h2)

  • Menü (.menu)

justify-content: space-between

  • Elemente werden maximal auseinandergezogen

  • Logo links, Menü rechts

align-items: center

  • vertikal zentriert

flex-wrap: wrap

  • bei wenig Platz → Menü rutscht nach unten

Flex-Container: .menu

.menu {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

Flex-Items:

  • die einzelnen Links <a>

Eigenschaften:

  • nebeneinander angeordnet

  • alle Menüpuinkte brechen um bei zu wenig Platz

  • gleichmäßige Abstände (gap)

.cards

.cards {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

👉 Flex-Items:

  • jede .card

Flex-Element: .card

.card {
  flex: 1 1 250px;
}

👉 Das ist die wichtigste Zeile!

flex-basis: 250px

  • „Ideale Startbreite“

  • Browser versucht: ~250px pro Card

flex-grow: 1

  • wenn Platz übrig ist → Cards wachsen

  • alle gleich stark

flex-shrink: 1

🔹 flex-shrink: 1

  • wenn Platz fehlt → Cards schrumpfen

  • ebenfalls gleichmäßig

🖥️ Großer Bildschirm

  • viel Platz

  • Cards wachsen → mehrere nebeneinander

💻 Mittlerer Bildschirm

  • weniger Platz

  • Cards bleiben ~250px → weniger pro Zeile

📱 Kleiner Bildschirm

  • Cards schrumpfen

  • irgendwann → umbrechen

Kahoot!