Der ultimative Leitfaden zu Flexbox

Überblick ¶

Das Flexbox-Layout, offiziell bekannt als CSS Flexible Box Layout Module, ist ein Layoutmodell in CSS.

Flexbox ist ein eindimensionales Layout, was bedeutet, dass Elemente jeweils nur in einer Dimension angeordnet werden, entweder als Zeile oder als Spalte, aber nicht beides gleichzeitig. Das steht im Gegensatz zum zweidimensionalen Modell – CSS Grid Layout, das Elemente gleichzeitig in zwei Dimensionen anordnet (Zeilen und Spalten zusammen).

Flexbox wurde als Alternative zu CSS-Floats eingeführt, um das Gesamtbild einer Webseite festzulegen. Flexbox bietet viele Vorteile; insbesondere können Sie damit Ausrichtung, Richtung, Reihenfolge und Größe von Elementen steuern.

Die Elemente innerhalb eines Flex-Containers:

• können in beliebiger Richtung angeordnet werden (nach links, nach rechts, nach unten oder sogar nach oben) (flex-direction).
• können eine direkte (von links nach rechts) oder umgekehrte (von rechts nach links) Reihenfolge haben.
• können eine „flexible“ Breite und Höhe haben, um den verfügbaren Platz auszufüllen (flex-item).
• können dynamisch zusammengezogen oder erweitert werden entlang der Hauptachse und dabei die Größe der sekundären Querachse beibehalten.
• können linear entlang der Hauptachse angeordnet oder in mehrere Zeilen entlang oder über die Querachse umgebrochen werden.

Flexbox ist relativ neu, genießt heute aber hervorragende Browserunterstützung.

(Mehr erfahren über Browserunterstützung und Kompatibilität).

Flexbox-Grundlagen ¶

Beim Arbeiten mit Flexbox müssen Sie in zwei Achsen denken — der Hauptachse und der Querachse — und zwischen Flex-Containern und Flex-Items unterscheiden.

Haupt- und Querachse

Flexbox ist ein Layout mit einer Achse; es hat eine Hauptachse und eine Querachse. Das bedeutet, dass Elemente entweder entlang der Hauptachse oder der Querachse angeordnet werden. Die Querachse steht immer senkrecht zur Hauptachse.

Die Hauptachse wird durch die Eigenschaft flex-direction definiert, die folgende Werte hat:

• row
• row-reverse
• column
• column-reverse

Wenn die Eigenschaft flex-direction mit den Werten row oder row-reverse angegeben ist, ist Ihre Hauptachse horizontal, d. h. sie verläuft entlang der Zeile in Inline-Richtung. Die Querachse verläuft dann entlang der Spalten.

Wenn die Eigenschaft flex-direction mit den Werten column oder column-reverse angegeben ist, ist die Hauptachse vertikal, d. h. sie verläuft von oben nach unten in Blockrichtung. Die Querachse verläuft dann entlang der Zeilen.

Werfen Sie einen Blick auf diese Abbildung, um das Konzept hinter den Flexbox-Achsen besser zu verstehen.

• main axis - Die Hauptachse eines Flex-Containers ist die Hauptachse, entlang der die Flex-Items platziert werden.
• main-start | main-end - Die Flex-Items werden innerhalb des Containers vom main-start aus bis zum main-end angeordnet.
• main size - Die Breite oder Höhe eines Flex-Items in der Hauptdimension ist die Hauptgröße des Elements.
• cross axis - Die Achse, die senkrecht zur Hauptachse verläuft; ihre Richtung hängt von der Richtung der Hauptachse ab (horizontal oder vertikal).
• cross-start | cross-end - Flex-Zeilen werden mit Elementen gefüllt und im Container beginnend an der cross-start-Seite des Flex-Containers bis zur cross-end-Seite angeordnet.
• cross size - Die Breite oder Höhe eines Flex-Items in der Querdimension ist die Quergröße des Elements.

Quelle: W3.org

Flex-Container und Items ¶

Ein Flex-Container ist ein Elternelement, das eine Reihe von Kindelementen, den Flex-Items, gruppiert. In den meisten Fällen definiert der Container das Layout und die Position seiner Flex-Items; Flex-Items können jedoch auch einzeln angepasst werden.

Um ein HTML-Element in einen Flex-Container zu verwandeln, sollten Sie die display-Eigenschaft mit den Werten flex (Block-Level-Flex-Container-Box) oder inline-flex (definiert eine Inline-Level-Flex-Container-Box) verwenden. Andernfalls würde der Browser alle von Ihnen verwendeten Flexbox-Eigenschaften ignorieren.

Flexbox-Container

.container {
  display: flex; /* or inline-flex*/
}

Eigenschaften des Flex-Containers ¶

Die Eigenschaft flex-direction

Die Eigenschaft flex-direction wird zum Erstellen von Zeilen- und Spaltenlayouts verwendet. Sie legt die Richtung der Hauptachse des Flex-Containers fest und bestimmt die Reihenfolge, in der die Elemente erscheinen.

Die Eigenschaft flex-direction hat die folgenden Werte:

• row - Elemente werden entlang der Zeile von links nach rechts angezeigt.
• row-reverse - Elemente werden von rechts nach links angezeigt.
• column - Elemente werden vertikal von oben nach unten angezeigt.
• column-reverse - Elemente werden vertikal von unten nach oben angezeigt.

Beispiel für die Eigenschaft flex-direction:

Beispiel für die Eigenschaft flex-direction

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h3 {
        color: #8ebf42;
      }
      .flex-container {
        display: flex;
        flex-direction: row-reverse;
        padding: 30px;
        border: 1px dashed #666;
      }
      .flex-container > div {
        width: 80px;
        height: 70px;
        margin: 5px;     
        border-radius: 3px;
        background-color: #1faadb;
      }
    </style>
  </head>
  <body>
    <h3>row-reverse</h3>
    <div class="flex-container">
      <div></div>
      <div></div>
      <div></div>
    </div>
  </body>
</html>

Try it Yourself »

In unserem Beispiel sind die Elemente in umgekehrter Reihenfolge angeordnet. Ändern Sie die Werte der Eigenschaft flex-direction (row, column, column-reverse), um zu sehen, wie sich das Erscheinungsbild der Elemente verändert.

INFO

Hinweis: row und row-reverse hängen vom Schreibmodus ab, daher werden sie im rtl-(rechts-nach-links-)Kontext entsprechend umgekehrt.

Die Eigenschaft flex-wrap ¶

Standardmäßig passen alle Flex-Items in eine Zeile, und wenn die Flex-Items für den Container zu breit sind, laufen sie über. Um dies zu verhindern, sollten Sie die Eigenschaft flex-wrap verwenden, um die Elemente umzubrechen.

Die Eigenschaft kann die folgenden Werte annehmen:

• nowrap (Standard) - Flex-Items werden in einer Zeile angezeigt; standardmäßig passen sie in die Breite des Flex-Containers.
• wrap - Flex-Items werden bei Bedarf in mehrere Zeilen angezeigt, von links nach rechts und von oben nach unten.
• wrap-reverse - Flex-Items werden bei Bedarf in mehrere Zeilen angezeigt, von links nach rechts und von unten nach oben.

INFO

Hinweis: Die Eigenschaft hängt vom Schreibmodus ab, daher werden sie im rtl-(rechts-nach-links-)Kontext entsprechend umgekehrt.

Die Eigenschaft justify-content ¶

Die Eigenschaft justify-content wird verwendet, um die horizontale Ausrichtung von Elementen entlang der Hauptachse festzulegen. Sie hilft dabei, den freien Platz zwischen den Flex-Items auf der Hauptachse zu verteilen.

Die Werte für justify-content sind wie folgt:

• flex-start (Standardwert) - Elemente werden am Anfang des Containers angeordnet.
• flex-end - Elemente werden am Ende des Containers angeordnet.
• center - Elemente werden in der Mitte des Containers angeordnet.
• space-between - Elemente werden gleichmäßig (mit Abstand dazwischen) in der Zeile verteilt; das erste Element befindet sich an der Startlinie, das letzte an der Endlinie.
• space-around - Elemente werden mit Abstand davor, dazwischen und danach angezeigt.
• space-evenly - Elemente werden so verteilt, dass der Abstand zwischen je zwei Elementen (und der Abstand zu den Rändern) gleich ist.

Beispiel für die Eigenschaft justify-content:

Eigenschaft justify-content, Beispiele

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .flex-container {
        display: flex;
        padding: 10px;
        margin-bottom: 20px;
        background-color: #1faadb;
      }
      .flex-start {
        justify-content: flex-start;
      }
      .flex-end {
        justify-content: flex-end;
      }
      .center {
        justify-content: center;
      }
      .space-between {
        justify-content: space-between;
      }
      .space-around {
        justify-content: space-around;
      }
      .flex-container > div {
        width: 28%;
        height: 45px;
        margin: 5px;
        border-radius: 3px;
        background-color: #8ebf42;
      }
      .flex-container > div.item-two {
        width: 18%;
      }
    </style>
  </head>
  <body>
    <p>flex-start</p>
    <div class="flex-container flex-start">
      <div></div>
      <div class="item-two"></div>
      <div></div>
    </div>
    <p>flex-end</p>
    <div class="flex-container flex-end">
      <div></div>
      <div class="item-two"></div>
      <div></div>
    </div>
    <p>center</p>
    <div class="flex-container center">
      <div></div>
      <div class="item-two"></div>
      <div></div>
    </div>
    <p>space-between</p>
    <div class="flex-container space-between">
      <div></div>
      <div class="item-two"></div>
      <div></div>
    </div>
    <p>space-around</p>
    <div class="flex-container space-around">
      <div></div>
      <div class="item-two"></div>
      <div></div>
    </div>
  </body>
</html>

Try it Yourself »

Ändern Sie den Wert der Eigenschaft justify-content, um zu sehen, wie die Elemente ausgerichtet werden.

Die Eigenschaft align-items ¶

Die Eigenschaft align-items wird zum Ausrichten von Elementen entlang der Querachse verwendet. Sie ist das genaue Gegenstück zur Eigenschaft justify-content, die die Elemente entlang der Hauptachse ausrichtet.

Die Werte für align-items sind wie folgt:

• stretch (Standard) - Elemente werden gestreckt, um den Container auszufüllen.
• flex-start - Elemente werden am cross-start des Containers angeordnet.
• flex-end- Elemente werden am cross-end des Containers angeordnet.
• center- Elemente werden in der Mitte der Querachse angeordnet.
• baseline - Elemente werden so ausgerichtet, dass ihre Grundlinien übereinstimmen.

INFO

Hinweis: Wenn die Höhe des Flex-Containers begrenzt ist, kann der Wert stretch dazu führen, dass der Inhalt des Flex-Items über das Element hinausläuft.

Beispiel für die Eigenschaft align-items:

Eigenschaft align-items, Codebeispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .flex-container {
        display: flex;
        justify-content: space-between;
        align-items: center; /* Use another value to see the result */
        height: 250px;
        padding: 15px;
        background-color: #1faadb;
      }
      .flex-container > div {
        width: 15%;
        height: 100%;
        border-radius: 3px;
        background-color: #8ebf42;
      }
      .flex-container .one {
        height: 60%;
      }
      .flex-container .three {
        height: 40%;
      }
      .flex-container .four {
        height: 70%;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div class="one"></div>
      <div class="two"></div>
      <div class="three"></div>
      <div class="four"></div>
    </div>
  </body>
</html>

Try it Yourself »

In unserem Beispiel haben wir den Wert center verwendet, um die Elemente auf der Querachse zu zentrieren. Probieren Sie andere Werte aus und sehen Sie sich das Ergebnis an.

Die Eigenschaft align-content ¶

Die Eigenschaft align-content wird verwendet, um die Zeilen eines Flex-Containers innerhalb des Containers auszurichten, wenn auf der Querachse zusätzlicher Platz vorhanden ist, ähnlich wie justify-content einzelne Elemente entlang der Hauptachse ausrichtet.

INFO

Hinweis: Die Eigenschaft align-property funktioniert nicht, wenn es im Flex-Container nur eine Zeile gibt.

Die Werte für align-content und ihre Bedeutung sind wie folgt:

• stretch (Standard) - Zeilen dehnen sich, um den verfügbaren Platz einzunehmen.
• flex-start - Zeilen werden am Anfang des Containers gruppiert.
• flex-end - Zeilen werden am Ende des Containers gruppiert.
• center - Zeilen werden in der Mitte des Containers gruppiert.
• space-between - Zeilen werden gleichmäßig verteilt; die erste Zeile befindet sich am Anfang des Containers, die letzte am Ende.
• space-around - Zeilen werden gleichmäßig mit gleichem Abstand um jede Zeile herum verteilt.

Beispiel für die Eigenschaft align-content:

Beispiel für die Eigenschaft align-content

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .flex-container {
        display: flex;
        flex-wrap: wrap;
        align-content: flex-end/* Use another value to see the result */;
        min-height: 250px;
        padding: 10px;
        background-color: #1faadb;
      }
      .flex-container>div {
        width: 45%;
        height: 45px;
        margin: 5px;
        border-radius: 3px;
        background-color: #8ebf42;
      }
      .flex-container .one,
      .flex-container .nine {
        width: 23%;
      }
      .flex-container .two,
      .flex-container .six {
        width: 9%;
      }
      .flex-container .three {
        width: 25%;
      }
      .flex-container .four {
        width: 35%;
      }
      .flex-container .five,
      .flex-container .eleven {
        width: 32%;
      }
      .flex-container .seven,
      .flex-container .ten {
        width: 6%;
      }
    </style>
  </head>
  <body>
    <p>flex-end</p>
    <div class="flex-container">
      <div class="one"></div>
      <div class="two"></div>
      <div class="three"></div>
      <div class="four"></div>
      <div class="five"></div>
      <div class="six"></div>
      <div class="seven"></div>
      <div class="eight"></div>
      <div class="nine"></div>
      <div class="ten"></div>
      <div class="eleven"></div>
    </div>
  </body>
</html>

Try it Yourself »

Die gap-Eigenschaft

Die gap-Eigenschaft wird verwendet, um den Abstand zwischen Flex-Items festzulegen.

Die Eigenschaft flex-flow ¶

Dies ist eine Kurzform für die einzelnen Eigenschaften flex-direction und flex-wrap, die zusammen die Haupt- und Querachsen des Flex-Containers definieren. Der Standardwert ist row nowrap.

INFO

Hinweis: Die Richtungen von flex-flow sind vom Schreibmodus abhängig, daher wird der Inhalt im rtl-(rechts-nach-links-)Kontext entsprechend umgekehrt.

Beispiel für die Eigenschaft flex-flow:

Eigenschaft flex-flow, Codebeispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title> 
    <style>
      .flex-container {
        display: flex;
        flex-flow: row-reverse wrap; /* Use another value to see the result */
        padding: 30px;
        border: 1px dashed #666;
      }
      .flex-container > div {
        width: 30%;
        height: 70px;
        margin: 5px;
        border-radius: 3px;
        background-color: #8ebf42;
        text-align: center;
        font-size: 28px;
        font-weight: 700;
        line-height: 70px;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
    </div>
  </body>
</html>

Try it Yourself »

Sie können einen anderen Wert wählen, um zu sehen, wie sich die Position der Elemente verändert.

Eigenschaften der Flex-Items ¶

Die Eigenschaft order

Standardmäßig werden Elemente in der Reihenfolge angeordnet, in der sie im Quellcode erscheinen (beginnend mit der niedrigsten Ordnungsgruppe und aufsteigend). Um die Reihenfolge der Elemente im Flex-Container zu ändern, wird die Eigenschaft order verwendet.

Die Eigenschaft order legt die Reihenfolge von Flex-Items fest, indem sie ihnen Ordnungsgruppen zuweist. Sie nimmt einen einzelnen ganzzahligen Wert an, der die Ordnungsgruppe definiert, zu der das Flex-Item gehört. Der Standardwert ist 0.

Beispiel für die Eigenschaft order:

Reihenfolge-Eigenschaft von Flexbox

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .flex-container {
        display: flex;
        flex-flow: row wrap;
        padding: 30px;
        border: 1px dashed #666;
      }
      .flex-container > div {
        width: 30%;
        height: 70px;
        margin: 5px;
        border-radius: 3px;
        background-color: #8ebf42;
        text-align: center;
        font-size: 28px;
        font-weight: 700;
        line-height: 70px;
        color: #fff;
      }
      .item-one { 
        order: 1;
      }
      .item-four {
        order: -1;
      }
      .item-five { 
        order: 0;
      }
      .item-three { 
        order: 2;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div class="item-one">1</div>
      <div class="item-two">2</div>
      <div class="item-three">3</div>
      <div class="item-four">4</div>
      <div class="item-five">5</div>
    </div>
  </body>
</html>

Try it Yourself »

Die Eigenschaft align-self ¶

Die Eigenschaft wird verwendet, um Elemente innerhalb des Flex-Containers individuell auszurichten. Flex-Items werden auf der Querachse der Flex-Container-Zeile ausgerichtet (genau wie justify-content, aber in der senkrechten Richtung). Wenn gesetzt, überschreibt die Eigenschaft align-self die durch align-items festgelegte Ausrichtung.

INFO

Hinweis: Wenn bei einem Item ein Querachsen-Rand auf auto gesetzt ist, wird align-self ignoriert.

Die Eigenschaft align-self hat dieselben Werte wie align-items. Sie sind der Übersichtlichkeit halber unten aufgeführt.

• stretch (Standard) - Elemente werden gestreckt, um den Container auszufüllen.
• flex-start - Elemente werden am cross-start des Containers angeordnet.
• flex-end- Elemente werden am cross-end des Containers angeordnet.
• center - Elemente werden in der Mitte der Querachse angeordnet.
• baseline - Elemente werden so ausgerichtet, dass ihre Grundlinien übereinstimmen.

Beispiel für die Eigenschaft align-self:

Beispiel für die Eigenschaft align-self

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .flex-container {
        display: flex;
        justify-content: space-between;
        height: 300px;
        padding: 10px;
        border: 1px dashed #666;
      }
      .flex-container > div {
        width: 15%;
        height: 80%;
        margin: 5px;
        border-radius: 3px;
        background-color: #8ebf42;
      }
      div.item-two {
        width: 20%; 
      }
      div.item-three {
        align-self: flex-end;
        height: 80px; 
        margin: 0 10%;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div class="item-one"></div>
      <div class="item-two"></div>
      <div class="item-three"></div>
      <div class="item-four"></div>
    </div>
  </body>
</html>

Try it Yourself »

Die Eigenschaft flex-grow ¶

Die Eigenschaft flex-grow definiert die Fähigkeit eines Elements, bei Bedarf zu wachsen. Sie legt den Flex-Wachstumsfaktor fest (relativ zu den übrigen Elementen innerhalb eines Containers), der bestimmt, wie viel Platz das Element im Container einnehmen soll, wenn positiver Platz verteilt wird.

Die Eigenschaft nimmt einen einheitenlosen Wert an, der als Verhältnis dient.

INFO

Hinweis: Der Wert darf keine negative Zahl sein.

Wenn alle Elemente im Container denselben Wert für flex-grow haben (zum Beispiel 1), dann haben alle Elemente im Container die gleiche Größe.

Wenn die Größe eines der Flex-Items anders ist (zum Beispiel 2), dann nimmt dieses Element im Verhältnis zur Größe der anderen Elemente doppelt so viel Platz ein (deren Größe auf 1 gesetzt ist).

Beispiel für die Eigenschaft flex-grow:

Eigenschaft flex-grow, Codebeispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .flex-container {
        display: flex;
        margin-bottom: 20px;
      }
      .flex-container div {
        flex-grow: 0.2;
        padding: 30px 5px;
        margin-right: -2px;
        border: 2px solid #8ebf42;
      }
      .flex-container div.two {
        flex-grow: 5;
      }
      .flex-container span {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 60px;
        height: 60px;
        margin: auto;
        border-radius: 50%;
        background-color: #8ebf42;
        font-size: 28px;
        font-weight: 700;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div>
        <span>1</span>
      </div>
      <div>
        <span>2</span>
      </div>
      <div>
        <span>3</span>
      </div>
      <div>
        <span>4</span>
      </div>
      <div><span>5</span>
      </div>
    </div>
    <div class="flex-container">
      <div>
        <span>1</span>
      </div>
      <div class="two">
        <span>2</span>
      </div>
      <div>
        <span>3</span>
      </div>
      <div>
        <span>4</span>
      </div>
      <div>
        <span>5</span>
      </div>
    </div>
  </body>
</html>

Try it Yourself »

TIP

Wir empfehlen, statt flex-grow die Kurzform-Eigenschaft flex zu verwenden, um die Flexibilität zu steuern, da sie alle nicht angegebenen Komponenten korrekt zurücksetzt, um gängige Anwendungsfälle zu unterstützen.

Die Eigenschaft flex-shrink ¶

Die Eigenschaft flex-shrink wird verwendet, um ein Flex-Item schrumpfen zu lassen. Sie legt den Platz fest, den das Element im Container einnehmen soll, wenn negativer Platz verteilt wird.

Die Eigenschaft nimmt einen einheitenlosen Wert an.

INFO

Hinweis: Der Wert darf keine negative Zahl sein.

Standardmäßig können alle Flex-Items verkleinert werden; wenn wir den Wert jedoch auf 0 setzen (nicht schrumpfen), behalten sie ihre ursprüngliche Größe bei.

Beispiel für die Eigenschaft flex-shrink:

Beispiel für die Eigenschaft flex-shrink

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .flex-container {
        display: flex;
      }
      .flex-container div {
        width: 120px;
        padding: 30px 10px;
        margin-right: -2px;
        border: 2px solid #8ebf42;
      }
      .flex-container div.two {
        flex-shrink: 0;
      }
      .flex-container span {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 60px;
        height: 60px;
        margin: auto;
        border-radius: 50%;
        background-color: #8ebf42;
        font-size: 28px;
        font-weight: 700;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div>
        <span>1</span>
      </div>
      <div class="two">
        <span>2</span>
      </div>
      <div>
        <span>3</span>
      </div>
      <div>
        <span>4</span>
      </div>
      <div>
        <span>5</span>
      </div>
      <div>
        <span>6</span>
      </div>
    </div>
  </body>
</html>

Try it Yourself »

TIP

Wir empfehlen, statt flex-shrink die Kurzform-Eigenschaft flex zu verwenden, um die Flexibilität zu steuern, da sie alle nicht angegebenen Komponenten korrekt zurücksetzt, um gängige Anwendungsfälle zu unterstützen.

Die Eigenschaft flex-basis ¶

Die Eigenschaft flex-basis legt die Anfangsgröße eines Flex-Items fest, bevor der verbleibende Platz gemäß den Flex-Faktoren verteilt wird. Die Eigenschaft wird durch das Schlüsselwort content oder width angegeben.

Die Werte für flex-basis sind wie folgt:

• auto (Standard) - die Länge entspricht der Länge des flexiblen Elements.
• width - eine absolute Länge oder ein Prozentsatz der Hauptgrößen-Eigenschaft des übergeordneten Flex-Containers oder das Schlüsselwort auto. Negative Werte sind ungültig.
• content - bestimmt die automatische Größenanpassung basierend auf dem Inhalt des Flex-Items.
• initial - setzt diese Eigenschaft auf ihren Standardwert.

INFO

Hinweis: Die content-Eigenschaft wird noch nicht gut unterstützt, daher ist es nicht leicht zu verstehen, was ihre Verwandten max-content, min-content und fit-content tun.

Beispiel für die Eigenschaft flex-basis:

Eigenschaft flex-basis, Codebeispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .flex-container {
        display: flex;
        background-color: #8ebf42;
      }
      .flex-container div {
        padding: 30px 10px;
        margin-right: -2px;
        border: 2px solid #8ebf42;
        background-color: #fff;
      }
      .flex-container div.four {
        flex-basis: 25%;
      }
      .flex-container span {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 60px;
        height: 60px;
        margin: auto;
        border-radius: 50%;
        background-color: #8ebf42;
        font-size: 28px;
        font-weight: 700;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div>
        <span>1</span>
      </div>
      <div>
        <span>2</span>
      </div>
      <div>
        <span>3</span>
      </div>
      <div class="four">
        <span>4</span>
      </div>
      <div>
        <span>5</span>
      </div>
    </div>
  </body>
</html>

Try it Yourself »

Die Eigenschaft flex ¶

Die Eigenschaft flex ist die Kurzform für flex-grow, flex-shrink und flex-basis zusammen. flex-shrink und flex-basis sind optional.

Unter anderem kann diese Eigenschaft auto (1 1 auto) oder none (0 0 auto) annehmen.

TIP

Wir empfehlen dringend, die Kurzform-Eigenschaft flex anstelle der einzelnen Eigenschaften zu verwenden.

Beispiel für die Eigenschaft flex:

flex statt flex-shrink, Codebeispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .flex-container {
        display: flex;
        height: 150px;
        padding: 10px;
        margin-bottom: 20px;
        border: 1px dashed #666;
      }
      .flex-container > div {
        width: 15%;
        margin: 5px;
        border-radius: 3px;
        background-color: #8ebf42;
      }
      .second > div {
        flex: 1;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div class="flex-container second">
      <div></div>
      <div></div>
      <div></div>
    </div> 
  </body>
</html>

Try it Yourself »

INFO

Hinweis: Die CSS-Eigenschaften float, clear und vertical-align haben keine Wirkung auf Flex-Items.

Flexbox-Beispiele ¶

Werfen wir einen Blick auf einige CSS-Flexbox-Beispiele und sehen wir, welche Arten von Layouts Sie für Ihre eigenen Webprojekte verwenden können.

Elemente vertikal und horizontal zentrieren

Das Zentrieren von Elementen mit allen in CSS verfügbaren Mitteln war schon immer ein Problem. Mit dem Aufkommen von Flexbox lässt sich dieses Problem leicht lösen. Mit den Eigenschaften align-items, align-self und justify-content können Sie Elemente sowohl vertikal als auch horizontal ausrichten.

Beispiel für die Eigenschaften align-items, align-self und justify-content zum vertikalen und horizontalen Zentrieren von Elementen:

Elemente vertikal und horizontal zentrieren Flexbox

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .flex-container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 200px;
        border: 1px dashed #666;
      }
      .flex-container > div {
        width: 70px;
        height: 70px;
        margin: 5px;
        border-radius: 3px;
        background-color: #1faadb;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </body>
</html>

Responsive Navigationsleiste mit Suche ¶

Mit Flexbox können Sie eine Navigationsleiste erstellen, bei der die Menüelemente links und die Suchleiste rechts ausgerichtet sind (oder umgekehrt). Die Navigationsleiste ist responsiv; sie erweitert oder verkleinert sich je nach Bildschirmgröße.

Beispiel für die responsive Navigationsleiste:

Navigationsleiste mit Flexbox, Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .main-nav {
        display: flex;
        padding: 15px;
        border-radius: 5px;
        background: #1c87c9;
        color: #fff;
        font-weight: 500;
      }
      .main-nav > ul {
        display: flex;
        flex: 2;
        padding: 0;
        margin: 0;
        list-style-type: none;
      }
      .main-nav li {
        margin-right: 20px;
      }
      .main-nav > form {
        display: flex;
        justify-content: flex-end;
        flex: 1;
      }
      .main-nav input {
        flex: 1;
        padding: 5px;
      }
      .main-nav button {
        padding: 0 20px;
        margin-left: 10px;
        border: 0;
        border-radius: 20px;
        background: #fff;
        color: #666;
      }
      @media screen and (max-width: 575px) {
        .main-nav {
          flex-direction: column;
        }
        .main-nav ul {
          margin-bottom: 10px;
        }
      }
    </style>
  </head>
  <body>
    <nav class="main-nav">
      <ul>
        <li>Home</li>
        <li>About us</li>
        <li>Services</li>
        <li>Contact us</li>
      </ul>
      <form>
        <input type="search" placeholder="Search" />
        <button type="button">Go</button>
      </form>
    </nav>
  </body>
</html>

Das Holy-Grail-Layout ¶

Das Holy-Grail-Layout-Muster ist im Web sehr beliebt. Es umfasst Header, Footer, den Hauptinhaltsbereich mit einer Navigation fester Breite links, Inhalt in der Mitte und einer Seitenleiste fester Breite rechts.

Beispiel für das Holy-Grail-Layout:

Holy-Grail-Layout mit Flexbox, Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      * {
        box-sizing: border-box;
        font-size: 18px;
      }
      body {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        margin: 0;
      }
      .main {
        display: flex;
        flex: 1;
      }
      .main > article {
        flex: 1;
      }
      .main > nav,
      .main > aside {
        flex: 0 0 20vw;
        background: #d5dce8;
      }
      .main > nav {
        order: -1;
      }
      header,
      footer {
        background: #1c87c9;
        height: 15vh;
      }
      header,
      footer,
      article,
      nav,
      aside {
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <header>Header</header>
    <div class="main">
      <article>Article</article>
      <nav>Nav</nav>
      <aside>Aside</aside>
    </div>
    <footer>Footer</footer>
  </body>
</html>

Übung

Welche der folgenden sind Eigenschaften von Flexbox in CSS?

flex-directionflex-wrapdisplay-inlinejustify-contentalign-contenttext-align