Flexbox Items

Die direkten untergeordneten Elemente eines Flex-Containers werden automatisch zu flexiblen (Flex-)Elementen.

Das obige Element repräsentiert sechs grüne Flex-Elemente in einem grauen Flex-Container.

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

Die flex-item-Eigenschaften sind:

Eigenschaft	Beschreibung
align-self	Gibt die Ausrichtung für ein Flex-Element an (überschreibt die Eigenschaft align-items des Flex-Containers)
flex	Eine abgekürzte Eigenschaft für die Eigenschaften flex-grow, flex-shrink und flex-basis
flex-basis	Gibt die Anfangslänge eines Flex-Elements an
flex-grow	Gibt an, wie stark ein Flex-Element im Verhältnis zu den restlichen Flex-Elementen im selben Container wächst
flex-shrink	Gibt an, wie stark ein Flex-Element im Verhältnis zu den restlichen Flex-Elementen im selben Container schrumpft
order	Gibt die Reihenfolge der Flex-Elemente innerhalb desselben Containers an

Die order Eigenschaft

Die order-Eigenschaft gibt die Reihenfolge der Flex-Elemente an. Das erste flex-Element im Code muss nicht als erstes Element im Layout erscheinen.

Der order-Wert muss eine Zahl sein, der Standardwert ist 0. Die order– Eigenschaft kann die Reihenfolge der Flex-Elemente ändern:

<div class="flex-container">
  <div style="order: 3">1</div>
  <div style="order: 2">2</div>
  <div style="order: 4">3</div>
  <div style="order: 1">4</div>
</div>

Die flex-grow-Eigenschaft

Die flex-grow-Eigenschaft gibt an, wie stark ein Flex-Element im Verhältnis zu den übrigen Flex-Elementen wächst. Der Wert muss eine Zahl sein, der Standardwert ist 0. Lässt das erste Flex-Item sich achtmal weiter ausdehnen als die anderen Flex-Items:

<div class="flex-container">
 <div style="flex-grow: 8">1</div>
 <div style="flex-grow: 1">2</div>
 <div style="flex-grow: 1">3</div>
</div>

Die flex-shrink-Eigenschaft

Die flex-shrink-Eigenschaft gibt an, wie stark ein Flex-Element im Verhältnis zu den übrigen Flex-Elementen schrumpft.

Der Wert muss eine Zahl sein, der Standardwert ist 1.

Das dritte Flex-Item wird nicht so stark schrumpfen wie die anderen Flex-Items:

<div class="flex-container">
 <div>1</div>
 <div>2</div>
 <div style="flex-shrink: 0">3</div>
 <div>4</div>
 <div>5</div>
 <div>6</div>
 <div>7</div>
 <div>8</div>
 <div>9</div>
 <div>10</div>
</div>

<!-- Damit flex-shrink greift, benötigen die Items zuvor einen width-Wert -->

<style>
.flex-container div {
  width: 100px;
  margin: 5px;
  padding: 20px;
  text-align: center;
  font-size: 30px;
  background-color: lightgreen;
}
</style>

Die Flex-Basis-Eigenschaft

Die flex-basis-Eigenschaft gibt die Anfangslänge eines Flex-Elements an.

Folgendes Beispiel legt die Anfangslänge des dritten Flex-Elements auf 200 Pixel fest:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-basis: 200px">3</div>
  <div>4</div>
</div>

Die flex-Eigenschaft

Die flex-Eigenschaft ist eine abgekürzte Eigenschaft für die Eigenschaften flex-grow, flex-shrink und flex-basis.

Dieses Beispiel macht das dritte Flex-Element nicht erweiterbar (0), nicht schrumpfbar (0) und setzt die Anfangslänge auf 200 Pixel:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex: 0 0 200px">3</div>
  <div>4</div>
</div>

Die Eigenschaft align-self

Die align-self-Eigenschaft gibt die Ausrichtung für das ausgewählte Element innerhalb des flexiblen Containers an.

Die align-self-Eigenschaft überschreibt die Standardausrichtung, die von der align-items-Eigenschaft des Containers festgelegt wird.

In diesen Beispielen wird ein 200 Pixel hoher Container verwendet, um die align-self-Eigenschaft besser zu demonstrieren:

Folgendes Beispiel richtet das dritte Flex-Element in der Mitte des Containers aus:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="align-self: center">3</div>
  <div>4</div>
</div>

Richten Sie das zweite Flex-Element oben im Container und das dritte Flex-Element unten im Container aus:

<div class="flex-container">
  <div>1</div>
  <div style="align-self: flex-start">2</div>
  <div style="align-self: flex-end">3</div>
  <div>4</div>
</div>