css mit Adi Prinz

Flex-Container und Flex-Items

Flexbox wird am Elternelement aktiviert. Dieses Element wird als Flex-Container bezeichnet. Seine direkten Kindelemente werden automatisch zu Flex-Items.

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

.flex-container {
  display: flex;
}
    

Im Beispiel ist das Element mit der Klasse .flex-container der Flex-Container. Die drei direkten Kindelemente mit der Klasse .item sind die Flex-Items.

Nur die direkten Kindelemente eines Flex-Containers werden zu Flex-Items. Weiter verschachtelte Elemente gehören nicht automatisch zu diesem Flex-Layout.

<div class="flex-container">
  <div class="item">
    <p>Dieser Absatz ist kein direktes Flex-Item.</p>
  </div>

  <div class="item">2</div>
</div>
    

Ein Flex-Item kann gleichzeitig selbst ein Flex-Container sein. Dazu erhält auch dieses Element display: flex.

.item {
  display: flex;
}
    

Flexbox mit display aktivieren

Flexbox wird mit der Eigenschaft display am Elternelement aktiviert. Dafür stehen die Werte flex und inline-flex zur Verfügung.

display: flex

.flex-container {
  display: flex;
}
    

Mit display: flex nimmt der Flex-Container standardmäßig die verfügbare Breite seines übergeordneten Elements ein. Seine direkten Kindelemente werden zu Flex-Items.

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

display: inline-flex

.inline-flex-container {
  display: inline-flex;
}
    

Mit display: inline-flex passt sich der Flex-Container grundsätzlich seinem Inhalt an und kann gemeinsam mit anderen Inline-Elementen in einer Zeile stehen.

<span class="inline-flex-container">
  <span class="item">1</span>
  <span class="item">2</span>
  <span class="item">3</span>
</span>
    

Der Unterschied zwischen flex und inline-flex betrifft das äußere Verhalten des Flex-Containers. Im Inneren werden die direkten Kindelemente bei beiden Werten nach den Regeln von Flexbox angeordnet.

Hauptachse und Querachse

Ein Flex-Layout arbeitet mit zwei Achsen: der Hauptachse (main axis) und der Querachse (cross axis).

• Die Hauptachse bestimmt die grundlegende Richtung, in der die Flex-Items angeordnet werden.
• Die Querachse verläuft immer rechtwinklig zur Hauptachse.

Die Richtung der Hauptachse wird mit der Eigenschaft flex-direction festgelegt. Der Standardwert ist row.

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

Bei flex-direction: row verläuft die Hauptachse in einem deutschsprachigen Dokument normalerweise von links nach rechts. Die Querachse verläuft von oben nach unten.

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

Bei flex-direction: column verläuft die Hauptachse normalerweise von oben nach unten. Die Querachse verläuft dazu rechtwinklig von links nach rechts.

Die Begriffe horizontal und vertikal dürfen nicht grundsätzlich mit Hauptachse und Querachse gleichgesetzt werden. Die Richtung hängt von flex-direction, der Schreibrichtung und dem Schreibmodus des Dokuments ab.

Grundverhalten der Flex-Items

Sobald ein Element zum Flex-Container wird, werden seine direkten Kindelemente nach den Regeln des Flexbox-Layouts angeordnet.

• Die Flex-Items werden standardmäßig in einer Zeile angeordnet.
• Ihre Reihenfolge entspricht zunächst der Reihenfolge im HTML.
• Die Flex-Items werden standardmäßig nicht in eine neue Zeile umgebrochen.
• Die Flex-Items dürfen standardmäßig schrumpfen, aber nicht wachsen.
• Die Flex-Items werden auf der Querachse standardmäßig gestreckt, sofern ihre entsprechende Größe auf auto steht.
• Außenabstände benachbarter Flex-Items fallen nicht zusammen.

Wichtige Standardwerte des Flex-Containers sind:

.flex-container {
  display: flex;

  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: normal;
  align-items: normal;
  align-content: normal;
}
    

Einige Werte verhalten sich abhängig vom verwendeten Layoutmodell. Beispielsweise entspricht normal bei align-items innerhalb eines Flex-Containers normalerweise dem Verhalten von stretch.

Für ein einzelnes Flex-Item gelten standardmäßig diese Werte:

.item {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
}
    

Eigenschaften des Flex-Containers

Die Eigenschaften des Flex-Containers bestimmen die Richtung, den Umbruch, die Abstände und die Ausrichtung der enthaltenen Flex-Items.

Diese Eigenschaften werden am Flex-Container festgelegt und wirken sich auf seine direkten Kindelemente aus.

Eigenschaften der Flex-Items

Die Eigenschaften der Flex-Items steuern die Größe, Ausrichtung und sichtbare Reihenfolge einzelner Elemente innerhalb des Flex-Containers.

Die Eigenschaft order verändert nur die visuelle Darstellung. Die Reihenfolge im HTML und die inhaltliche Lesereihenfolge bleiben unverändert.

Deshalb sollte eine inhaltlich sinnvolle Reihenfolge bereits im HTML festgelegt und nicht erst mit CSS hergestellt werden.

Ein einfaches Flexbox-Beispiel

Das folgende Beispiel zeigt drei Flex-Items, die flexibel auf die verfügbare Breite reagieren.

<div class="flex-example">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>
    

.flex-example {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  max-width: 800px;
  margin-block: 1.25rem;
  padding: 1.25rem;
  background-color: #594255;
}

.flex-example .item {
  display: grid;
  place-items: center;
  flex: 1 1 150px;
  min-height: 100px;
  padding: 0.75rem;
  background-color: #fff;
  color: #594255;
  font-family: sans-serif;
  font-size: 2rem;
  font-weight: 700;
}
    

Der Container ordnet seine direkten Kindelemente mit Flexbox an. Mit flex-wrap: wrap dürfen die Items bei Platzmangel in eine neue Zeile wechseln. Die Eigenschaft gap erzeugt den Abstand zwischen den Items.

Die Kurzschreibweise flex: 1 1 150px setzt diese drei Eigenschaften:

.item {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 150px;
}
    

• flex-grow: 1: Die Items dürfen verfügbaren freien Platz nutzen.
• flex-shrink: 1: Die Items dürfen bei Platzmangel schrumpfen.
• flex-basis: 150px: Die Berechnung beginnt mit einer Hauptgröße von 150px.

Flexbox oder Grid?

Flexbox und Grid sind moderne CSS-Layoutmodelle. Welches Modell besser geeignet ist, hängt vom gewünschten Aufbau ab.

Flexbox und Grid schließen einander nicht aus. Beide Layoutmodelle können problemlos gemeinsam verwendet werden.

Ein Seitenbereich kann beispielsweise mit Grid aufgebaut werden, während eine darin enthaltene Navigation oder Button-Gruppe Flexbox verwendet.