Skip to content

V2_Flexbox

Jump to bottom
hzuellig edited this page Feb 17, 2026 · 1 revision

Flexbox Einführung

Wir haben gelernt: Der Document Flow ist die Anordnung der Seitenelemente, wie sie durch die Positionierungsanweisungen und die Reihenfolge der HTML-Anweisungen definiert ist, d. h. wie die verschiedenen Elemente den Platz einnehmen und sich umeinander anordnen. Ohne CSS Anweisungen orientiert sich der Document Flow an der Textausrichtung (Westeuropäisch von links nach rechts und oben nach unten).

Wie entsteht ein Layout mit verschiedenen Spalten?

Seit mehr als 10 Jahren gibt es im CSS zwei neue Layout Konzepte, Flexbox und Grid. Grundsätzlich erlaubt euch Flexbox, Elemente in eine Richtung anzuordnen: Entweder in Zeilen oder in Spalten. Flexbox bietet euch viele Möglichkeiten flexibel (daher der Name) mit dem vorhandenen Platz umzugehen und einfach responsive Layouts zu bauen.


Die Property display:flex wird für das Parent Element gesetzt. Die Flexbox Anweisungen bestimmen, wie sich die Kinder im Parent Container anordnen.

.parentcontainer{
    display:flex; 
}
.child{
    border:1px dotted blue;
    padding:1rem;
    margin:1rem;
}
<div class="parentcontainer">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
</div

flex-direction und Achsen

Richtung des Layouts: standardmässig werden die Elemente in der Schreibrichtung (bei uns von links nach rechts) ausgelegt. Das ist die Hauptachse. flex-direction:row wäre die explizite Angabe dazu. Die Querachse ist dann von oben nach unten.

Mit flex-direction:column (beim parentcontainer) ändert ihr die Hauptachse und die Elemente werden in einer Spalte von oben nach unten dargestellt. Die Querachse ist entsprechend von links nach rechts (in der westlichen Schreibrichtung).


Mozilla Referenz

justify-content

Die Property justify-content definiert, wie der Browser den Platz zwischen und um Inhaltselemente entlang der Hauptachse eines Flex-Containers verteilt. Ein paar Varianten:

.parentcontainer{
    /* Positional alignment */
    justify-content: center; /* Pack items around the center */
    /* justify-content: start; /* Pack items from the start */
    /* justify-content: end; /* Pack items from the end */
    /* justify-content: space-between; /* Raum gleichmässig zwischen den Items verteilen. Das erste hat links keinen Raum, das letze hat rechts keinen */
}

Mozilla Referenz

align-items

Die Property align-items definiert, wie der Browser die Inhaltselemente entlang der Querachse eines Flex-Containers verteilt.
https://yoksel.github.io/flex-cheatsheet/#section-align-items-self
Ein paar Varianten:

.parentcontainer{
    /* Positional alignment */
    align-items: center; /* Pack items around the center */
    /*align-items: start; /* Pack items from the start */
    /*align-items: end; /* Pack items from the end */
}

Mozilla Referenz

Beides kombiniert, die Einmittung entlang der Hauptachse und Querachse, erlaubt, ein Element horizontal und vertikal zu zentrieren. Damit ein Element im Viewport vertikal zentriert wird, muss dem Parent eine Höhe zugewiesen werden. Sonst ist das Parent einfach so gross wie das Kind Element und die Zentrierung ist nicht sichtbar.

.parentcontainer{
    align-items: center; 
    justify-content: center;
    height:100vh;
}

flex-wrap

Standardmässig werden die Items nicht umbrochen. Mit flex-wrap:wrap bestimmst du, dass es einen Umbruch gibt, wenn der parentcontainter in der Hautachse gefüllt ist:

.parentcontainer{
    /* wrap? */
    flex-wrap:          nowrap (default)
                        /* wrap */
                        /* wrap-reverse */
}

flex-basis

Die CSS-Eigenschaft flex-basis legt fest, wie gross die Hauptgrösse eines Flex-Elements ist. Du kannst dir flex-basis in Analogie zu width vorstellen – es legt die Breite fest. Im Unterschied zu width kann flex-basis aber erweitert werden, mit einem Wachstums- und Schrumpfaktor. Damit legst du fest, wie sich das Element verhalten soll, falls mehr oder weniger Platz als die Basis vorhanden ist (eben flexibel :-))

flex-grow

Die CSS-Eigenschaft flex-grow legt den Flex-Wachstumsfaktor für die Hauptgröße eines Flex-Elements fest.
https://yoksel.github.io/flex-cheatsheet/#section-flex-grow

.child:fist-of-type{
    flex-grow:2;
    background-color:pink;
}

Im Überblick:

.container{
    display: flex;
    /* horizontal alignment */
    justify-content:    flex-start (default)
                        /*flex-end
                        center
                        space-between
                        space-around
                        space-evenly */

    /* vertical alignment */
    align-items:        stretch (default)
                        /* flex-start */
                        /* flex-end */
                        /* center */
                        /* baseline */

    /* direction of items */
    flex-direction:     row (default)
                        /* row-reverse */
                        /* column */
                        /* column-reverse */

}
.child{
    /* override align-items */
    align-self:         stretch
                        /* flex-start */
                        /* flex-end */
                        /* center */
                        /* baseline   */

    /* how much should the div grow? */
    flex-grow:               number
}

Ressourcen zu Flexbox

Uebung: Verschachteltes Layout mit Flexbox


Ausschnitt aus einem Bild von Piet Mondrian. Wir missbrauchen diesen Ausschnitt kurz als Vorlage für ein Layout, das Elemente sowohl in der vertikalen als auch horizontalen Richtung angeordnet hat.

Dafür musst du wissen, dass ein Kindelement, das in einem Container liegt, der display:flex zugewiesen hat, selber auch wieder die Property display:flex haben kann und Kinder haben kann. Und so weiter, die Tiefe spielt keine Rolle.

Clone this wiki locally