Flexbox

Praktische Beispiele für das CSS-Modul "Flexbox"

Die Ausgangslage

In HTML sind alle Block-Element so breit wie möglich (wie der Bildschirm oder wie das Element das sie umgibt). Das reicht für das Layout eines Textes. Aber jede auch nur etwas anspruchsvollere Gestaltung enthält Elemente die nebeneinander platziert sind.

Für eine lange Zeit musste man sich beim umsetzen dieser Layouts mit komplizierten Lösungen behelfen. Wenn man online sucht, findet man noch oft Antworten, die mit den CSS-Eigenschaften float und position arbeiten.
Lasst diese Lösungen links liegen! Sie funktionieren, haben aber Seiteneffekte und sind oft unnötig kompliziert.

Mit der Standardisierung des Flexbox-Moduls wurde lange gewartet, dafür sind nun sehr flexible Layouts mit wenig Code möglich.

CSS wie wir es bis jetzt gelernt haben

Einem HTML-Element wird eine CSS-Eigenschaft zugewiesen und es wird dadurch anders dargestellt.

Flexbox verstehen

Um Flexbox-Eigenschaften einsetzen zu können, muss man etwas grundlegendes verstehen:
Man gibt einem Element eine Eigenschaft, die die Darstellung dieses Elementes nicht verändert, dafür aber die Darstellung dessen direkten Kind-Elemente!

Das heisst: in den folgenden zwei Beispielen ändert sich die violette Box nicht, wenn sie die Eigenschaft display:flex hat.
Was sich ändert: das Layout der Kind-Elemente. (Ohne das diese neue CSS-Eigenschaften bekommen hätten!)

Die HTML-Elemente die wir im folgenden verwenden:

  • Violett: eine Box, eine Zeile, ein HTML-Element
  • Orange: Kind-Elemente die gelayoutet werden

Der Beispiel-Code ohne Flexbox-Eigenschaften: die beiden orangen Elemente werden untereinander angeordnet.

Box 1
Box 2
    
        <div class="box-flex-parent">
            <div class="box-flex-child">Box 1</div>
            <div class="box-flex-child">Box 2</div>
        </div>

Derselbe HTML-Code, die Zeile hat nun die Eigenschaft display:flex

Box 1
Box 2

    <div class="box-flex-parent">
        <div class="box-flex-child">Box 1</div>
        <div class="box-flex-child">Box 2</div>
    </div>

Verstanden?

Falls nicht, hilft vielleicht folgendes Bild: die Flexbox ist eine Zeile. Gibt man dieser Zeile die Eigenschaft display:flex, dann ändert sich diese Zeile nicht. Was sich ändert ist das Layout - und damit die Darstellung - der Elemente in der Zeile.

Beispiele

Klassische Beispiele die ohne Flexbox sehr mühsam umzusetzen sind:

Die Navigation in der der restliche Platz auf alle Elemente verteilt wird

Home Kapitänsmützen Kontakt

Ein Element zentrieren

Wie es geht? Die Flexbox verteilt den übrig gebliebenen Platz links und rechts von unserem Element (justify-content: space-around;) sowie oben und unten (align-items: center;)

Lorem
Ipsum

3 bildschirmfüllende Spalten nebeneinander

Um das zu erreichen, gibt man nun den Kind-Elementen CSS-Eigenschaften.

Mit flex-grow teilen wir der Flexbox mit welchen Anteil der Breite an dieses Element gehen soll.

Menü Inhalt Werbung

Material