CSS Flexbox einfach erklärt

Aktualisiert am 29.10.2026 · Lesezeit ca. 4 Min. · Niveau: Anfänger · von Viktor Tribus, IT-Tribus Nideggen

In diesem Artikel lernen Sie die Grundlagen des CSS Flexbox-Layout-Managers kennen. Flexbox erleichtert das Ausrichten und Skalieren von Elementen in einer Website. Nach dem Lesen können Sie eigene flexibele Layouts erstellen und anpassen.

• Grundlagen der CSS Flexbox
• Einen einfachen Flexbox-Container erstellen
• Die Haupt- und Kreuzachse verstehen
• Flexbox-Eigenschaften anwenden

Geschätzte Lernzeit: ca. 20 Minuten

Benötigte Werkzeuge: Texteditor (z.B. Visual Studio Code, Sublime Text), Webbrowser

Stellen Sie sich eine Schachtel voller verschiedener Gegenstände vor – das ist unser Flexbox-Container. Die Gegenstände darin sind die flexiblen Elemente (oder „Flex-Elemente“). Mit Flexbox können wir diese Gegenstände so anordnen, dass sie sich automatisch nach dem Inhalt oder den Dimensionen der Schachtel ausrichten.

In CSS bezieht sich das display: flex;-Eigenschaft auf einen Elternteil (Container), der die Flex-Elemente enthält. Die Hauptachse ist die Achse, in der die Elemente angeordnet sind (zum Beispiel von links nach rechts). Die Kreuzachse ist dann senkrecht dazu.

Öffnen Sie Ihren Texteditor und fügen Sie den folgenden HTML-Code ein:

<html>
  <head>
    <style>
      .flex-container {
        display: flex;
        background-color: lightblue;
      }
      .item {
        width: 50px;
        height: 50px;
        margin: 10px;
        background-color: darkblue;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div class="item"></div>
      <div class="item"</div>
      <div class="item"</div>
    </div>
  </body>
</html>

Öffnen Sie die Datei im Webbrowser. Sie sehen einen blauen Container mit drei dunkelblauen Quadern, die nebeneinander angeordnet sind.

Fügen Sie zur .flex-container-Klasse den folgenden CSS-Code hinzu:

justify-content: space-around;

Dies bewirkt, dass die Elemente gleichmäßig auf der Hauptachse verteilt werden.

align-items: center;

Dies sorgt dafür, dass die Elemente auf der Kreuzachse zentriert sind.

Ändern Sie den flex-direction-Wert in der .flex-container-Klasse:

flex-direction: column;

Dies bewirkt, dass die Elemente sich senkrecht anordnen.

Ursache: Der Container hat keine Größe oder der CSS-Code ist falsch geschrieben.

Lösung: Überprüfen Sie, ob die display: flex;-Eigenschaft korrekt gesetzt wurde und ob der Container eine passende Breite und Höhe hat.

Ursache: Die Eigenschaften zur Ausrichtung (z.B. justify-content, align-items) wurden falsch gesetzt.

Lösung: Stellen Sie sicher, dass die richtigen Werte für diese Eigenschaften verwendet werden.

Ursache: Die Breite oder Höhe der Flex-Elemente ist zu groß für den Container.

Lösung: Ändern Sie die Größenwerte der Flex-Elemente oder verwenden Sie Eigenschaften wie flex-grow, um das Verhalten anpassen.

Erstellen Sie einen neuen HTML-Dokument mit einem Flexbox-Container, der vier Quadrate enthält. Die Quadrate sollen sich in einer Zeile zentriert ausrichten und gleichmäßig auf der Hauptachse verteilt sein.

Lösungsvorschlag:

<html>
  <head>
    <style>
      .flex-container {
        display: flex;
        justify-content: space-around;
        align-items: center;
        background-color: lightgreen;
      }
      .item {
        width: 50px;
        height: 50px;
        margin: 10px;
        background-color: darkgreen;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
  </body>
</html>

Ja, Flexbox eignet sich nicht nur für einfache Anordnungen. Es kann für komplexere Layouts verwendet werden und bietet viele flexible Optionen zur Ausrichtung und Skalierung von Elementen.

Flexbox wird von den meisten modernen Browsern unterstützt, einschließlich Chrome, Firefox, Safari und Edge.

Während Flexbox sich auf die Ausrichtung entlang einer Haupt- oder Kreuzachse konzentriert, ermöglicht das CSS Grid Layout das Erstellen von zweidimensionalen Gitterstrukturen. Beide Methoden können zusammen verwendet werden.

Für weitere Informationen und fortgeschrittene Konzepte empfehlen wir die Dokumentation auf developer.mozilla.org oder kulturbanause.de. Bei Fragen zur praktischen Umsetzung steht Ihnen auch IT-Tribus in Nideggen gerne zur Verfügung.

Sie haben nun die Grundlagen der CSS Flexbox gelernt und können einfache Layouts erstellen. Als nächstes empfehlen wir, sich mit fortgeschrittenen Anwendungsfällen zu vertraut machen oder das CSS Grid-Layout kennenzulernen, um komplexere Webseiten zu gestalten.

• Grundkonzepte von Flexbox – CSS – developer.mozilla.org
• Flexbox – Webentwicklung lernen – developer.mozilla.org
• Testen Sie Ihre Fähigkeiten: Flexbox – Webentwicklung lernen – developer.mozilla.org
• Was ist eine Flexbox? – HTML – coddy.tech
• CSS Flexbox – Einführung und Überblick – kulturbanause.de
• Flexbox CSS: Layout-Grundlagen erklärt – om-360.de – om-360.de

Hinweis: Dieser Beitrag wurde am 29.10.2026 mit KI-Unterstützung erstellt, auf Basis der genannten Quellen eigenständig formuliert und redaktionell von IT-Tribus betreut. Alle Angaben ohne Gewähr – bitte prüfen Sie Befehle vor dem Einsatz in produktiven Umgebungen und legen Sie vorher eine Sicherung an.