Kostenlose Tutorials für Anfänger

Appearance

Kapitel 3: Kernbegriffe von Flexbox-Layout ​

3.1 Container (Flex-Container) ​

Definition: Der Flex-Container ist das übergeordnete Element, das display: flex oder display: inline-flex zugewiesen bekommt. Alle direkten Kindelemente werden zu Flex-Elementen.

Beispiel:

html
<!-- .container ist der Flex-Container -->
<div class="container">
  <div class="item">Element 1</div>
  <div class="item">Element 2</div>
  <div class="item">Element 3</div>
</div>
css
.container {
  display: flex;  /* Jetzt ist .container ein Flex-Container */
  background-color: #f0f0f0;
  padding: 20px;
}

.item {
  background-color: #3498db;
  color: white;
  padding: 20px;
  margin: 5px;
}

Wichtig:

  • Nur die direkten Kinder werden zu Flex-Elementen
  • Enkel-Elemente bleiben unberührt
html
<!-- Richtig -->
<div class="container">
  <div class="item">Ich bin ein Flex-Element</div>  ✅
  <div class="item">
    <span>Ich bin KEIN Flex-Element (nur normales Kindelement)</span>  ❌
  </div>
</div>

3.2 Projekt / Element (Flex-Element) ​

Definition: Die Flex-Elemente (auch Flex-Items genannt) sind die direkten Kindelemente eines Flex-Containers. Sie werden automatisch entlang der Hauptachse angeordnet.

Eigenschaften:

  • Werden automatisch in eine Zeile oder Spalte angeordnet
  • Können mit Flex-Eigenschaften gesteuert werden (flex-grow, flex-shrink, etc.)
  • Behálten ihre ursprüngliche Reihenfolge (kann mit order geändert werden)

Beispiel:

css
.container {
  display: flex;
}

.item {
  /* Flex-Elemente */
  flex: 1;  /* Teilen sich den Platz gleichmäßig */
}

Anzahl der Flex-Elemente:

html
<div class="container">
  <div class="item">1</div>  <!-- Flex-Element -->
  <div class="item">2</div>  <!-- Flex-Element -->
  <div class="item">3</div>  <!-- Flex-Element -->
  <!-- Insgesamt 3 Flex-Elemente -->
</div>

3.3 Hauptachse (Main Axis) ​

Definition: Die Hauptachse (Main Axis) ist die Achse, entlang der Flex-Elemente im Container angeordnet werden. Die Richtung wird durch die Eigenschaft flex-direction festgelegt.

Standard (flex-direction: row):

►────── Hauptachse (horizontal) ──────►
┌──────────────────────────────────────┐
│  [Element 1]  [Element 2]  [Element 3]  │
└──────────────────────────────────────┘
        ▲           ▲           ▲
        │           │           │
   Hauptachsen-  Hauptachsen-  Hauptachsen-
   start        mitte       end

Wenn flex-direction: column:

▼
│
│  [Element 1]
│
│  [Element 2]
│
│  [Element 3]
│
▼
Hauptachse (vertikal)

flex-direction Werte:

  • row (Standard): Horizontal von links nach rechts
  • row-reverse: Horizontal von rechts nach links
  • column: Vertikal von oben nach unten
  • column-reverse: Vertikal von unten nach oben

Beispiel:

css
.container {
  display: flex;
  flex-direction: row;  /* Standard: horizontal */
}

3.4 Querachse (Cross Axis) ​

Definition: Die Querachse (Cross Axis) steht senkrecht zur Hauptachse. Wenn die Hauptachse horizontal ist, ist die Querachse vertikal, und umgekehrt.

Standard (flex-direction: row):

►────── Hauptachse (horizontal) ──────►
│
│  [Element 1]  [Element 2]  [Element 3]
│
▼
Querachse (vertikal)

Wenn flex-direction: column:

►────── Querachse (horizontal) ──────►
│
│  [Element 1]
│
│  [Element 2]
│
│  [Element 3]
│
▼
Hauptachse (vertikal)

Wichtig für Ausrichtung:

  • justify-content: Steuert Ausrichtung auf der Hauptachse
  • align-items: Steuert Ausrichtung auf der Querachse

3.5 Hauptachsen-Start/-Ende, Querachsen-Start/-Ende ​

Hauptachsen-Start (Main Start) und Hauptachsen-Ende (Main End) ​

Definition:

  • Main Start: Der Punkt, an dem die Flex-Elemente beginnen
  • Main End: Der Punkt, an dem die Flex-Elemente enden

Bei flex-direction: row (Standard):

Main Start ►───────────────────────► Main End
            ┌──────────────────────┐
            │ [1] [2] [3]          │
            └──────────────────────┘

Bei flex-direction: row-reverse:

Main End ►───────────────────────► Main Start
          ┌──────────────────────┐
          │ [3] [2] [1]          │
          └──────────────────────┘

Bei flex-direction: column:

Main Start
    ▼
    │
    │  [1]
    │  [2]
    │  [3]
    │
    ▼
  Main End

Querachsen-Start (Cross Start) und Querachsen-Ende (Cross End) ​

Definition:

  • Cross Start: Der Startpunkt der Querachse
  • Cross End: Der Endpunkt der Querachse

Bei flex-direction: row (Standard):

Cross Start ➔
    │
    │  [1] [2] [3]
    │
    ▼
  Cross End

Wichtig:

  • align-items steuert, wo die Elemente auf der Querachse ausgerichtet werden
  • align-content steuert, wie Zeilen auf der Querachse verteilt werden (nur bei flex-wrap: wrap)

3.6 Kernbegriffe praktisch überprüfen ​

Übung 1: Container und Elemente identifizieren ​

HTML:

html
<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="not-flex-item">
    <span>Ich bin kein Flex-Element!</span>
  </div>
</div>

CSS:

css
.flex-container {
  display: flex;
  border: 3px solid red;  /* Container markieren */
  padding: 10px;
}

.flex-item {
  border: 3px solid blue;  /* Flex-Elemente markieren */
  padding: 20px;
  margin: 5px;
}

.not-flex-item {
  border: 3px solid green;
  padding: 20px;
  margin: 5px;
}

Beobachtung:

  • .flex-container hat roten Rahmen → Das ist der Container
  • .flex-item Elemente stehen in einer Reihe → Das sind Flex-Elemente
  • .not-flex-item steht auch in der Reihe, aber <span> darin ist kein Flex-Element

Übung 2: Hauptachse und Querachse visualisieren ​

HTML:

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

CSS:

css
.container {
  display: flex;
  flex-direction: row;  /* Hauptachse: horizontal */
  
  /* Visualisierung */
  border: 2px solid red;
  padding: 20px;
  width: 500px;
  height: 300px;  /* Höhe für Querachse */
}

.item {
  width: 100px;
  height: 50px;
  background-color: lightblue;
  border: 1px solid blue;
  
  /* Text zentrieren */
  display: flex;
  justify-content: center;
  align-items: center;
}

Beobachtung:

  1. Hauptachse: Horizontal (von links nach rechts)
  2. Querachse: Vertikal (von oben nach unten)
  3. justify-content würde horizontal ausrichten
  4. align-items würde vertikal ausrichten

Übung 3: Hauptachse ändern ​

CSS ändern:

css
.container {
  display: flex;
  flex-direction: column;  /* Jetzt ist Hauptachse vertikal! */
  
  border: 2px solid red;
  padding: 20px;
  width: 500px;
  height: 300px;
}

Beobachtung:

  1. Hauptachse: Vertikal (von oben nach unten)
  2. Querachse: Horizontal (von links nach rechts)
  3. justify-content würde jetzt vertikal ausrichten
  4. align-items würde jetzt horizontal ausrichten

Visuelle Zusammenfassung ​

Flex-Container (äußerer Rahmen)
┌────────────────────────────────────┐
│                                    │
│  Hauptachse (Main Axis)            │
│  ➔➔➔➔➔➔➔➔➔➔➔➔➔➔➔➔➔➔➔➔│
│                                    │
│  ┌─────┐  ┌─────┐  ┌─────┐      │
│  │Item1│  │Item2│  │Item3│      │
│  └─────┘  └─────┘  └─────┘      │
│                                    │
│  Querachse (Cross Axis)            │
│  ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓         │
│                                    │
└────────────────────────────────────┘

Wichtigste Erkenntnis:

Die Hauptachse bestimmt die Richtung, in der Flex-Elemente angeordnet werden. Die Querachse steht immer senkrecht dazu.

Zusammenfassung ​

In diesem Kapitel hast du gelernt:

  • ✅ Was ein Flex-Container ist
  • ✅ Was Flex-Elemente sind
  • ✅ Was die Hauptachse (Main Axis) ist
  • ✅ Was die Querachse (Cross Axis) ist
  • ✅ Was Main Start/End und Cross Start/End bedeuten
  • ✅ Wie man die Achsen praktisch überprüft

Nächstes Kapitel: In Kapitel 4 lernen wir, wie man Flexbox aktiviert (display: flex) und welche Standardeinstellungen gelten.

Übungsaufgaben ​

Aufgabe 3.1 ​

Erstelle einen Flex-Container mit 5 Flex-Elementen. Ändere flex-direction auf column und beobachte die Änderung der Hauptachse.

Aufgabe 3.2 ​

Erstelle ein Layout mit einem Container und 3 Elementen. Versuche, die Elemente sowohl auf der Hauptachse als auch auf der Querachse zu zentrieren.

Aufgabe 3.3 ​

Erstelle einen Container mit 6 Elementen. Verwende flex-wrap: wrap, sodass Elemente umbrechen, und beobachte, wie sich die Querachse bei mehreren Zeilen verhält.

Frei für alle Anfänger

Copyright © 2026 Programmier-Tutorials