flexbox


div, ohne style

Menüpunkt 1
Menüpunkt 2
Menüpunkt 3
Menüpunkt 4
Menüpunkt 5



div, style display:inline; oder float:left mit margin;

Menüpunkt 1
Menüpunkt 2
Menüpunkt 3
Menüpunkt 4
Menüpunkt 5






display: flex;
flex-direction: row (default) | row-reverse | column | column-reverse; > Anordnung der Elemente
flex-wrap: nowrap | wrap | wrap-reverse > Zeilenumbruch
justify-content: center; | flex-start | flex-end | space-around | space-between > horizontale Verteilung der Elemente
align-content: center | flex-start | flex-end | space-around | space-between | stretch | > Vertikale Verteilung der Elemente
align-items: center; | flex-start | flex-end | stretch | baseline > vertikale Anordnung des Inhalts im Element (bsp: in einer Zeile links (start) rechts (end) | Spalte links (start) rechts (end))

Zusatz für einzelne Elemente:
flex: 0 0 200px; (Größe fix, Stauchung fix, Breite)
flex: 1 1 200px; (Größe ausfüllend 100 %, Stauchung allein bis alle Elemente bei Minimum, dann alle gemeinsam, Breite)
align-self: flex-start (bestimmtes Element oben platzieren) | center | flex-end



display:flex;flex-direction:row;height:100px;


Menüpunkt 1
Menüpunkt 2
Menüpunkt 3
Menüpunkt 4
Menüpunkt 5








display:flex;flex-direction:row-reverse;height:100px;


Menüpunkt 1
Menüpunkt 2
Menüpunkt 3
Menüpunkt 4
Menüpunkt 5








display:flex;flex-direction:column;height:100px;


Menüpunkt 1
Menüpunkt 2
Menüpunkt 3
Menüpunkt 4
Menüpunkt 5








display:flex;flex-direction:column-reverse;height:100px;







Menüpunkt 1
Menüpunkt 2
Menüpunkt 3
Menüpunkt 4
Menüpunkt 5








display:flex;flex-direction:row;flex-wrap:no-wrap;height:100px;


Menüpunkt 1
Menüpunkt 2
Menüpunkt 3
Menüpunkt 4
Menüpunkt 5
Menüpunkt 6
Menüpunkt 7
Menüpunkt 8
Menüpunkt 9
Menüpunkt 10








display:flex;flex-direction:row;flex-wrap:wrap;height:100px;


Menüpunkt 1
Menüpunkt 2
Menüpunkt 3
Menüpunkt 4
Menüpunkt 5
Menüpunkt 6
Menüpunkt 7
Menüpunkt 8
Menüpunkt 9
Menüpunkt 10








display:flex;flex-direction:column;flex-wrap:wrap;height:100px;


Menüpunkt 1
Menüpunkt 2
Menüpunkt 3
Menüpunkt 4
Menüpunkt 5
Menüpunkt 6
Menüpunkt 7
Menüpunkt 8
Menüpunkt 9
Menüpunkt 10




Kurzform: flex-flow: flex-direction flex-wrap;
flex-flow: row wrap;





display:flex;display:flex;flex-direction:column;flex-wrap:wrap;justify-content:center;height:100px

center > Vertikale Zentrierung der Elemente
flex-start > obenausgerichtet
flex-end > untensausgerichtet
space-around > zwischen den einzelnen Elementen ist der gleiche Abstand (jeweils pro Zeile) und der gleiche Abstand besteht zwischen dem oberen Rand zum 1. Element, sowie zwischen dem unteren Rand und dem letzten Element (jeweils pro Zeile).
space-between > es gibt keinen Abstand zwischen Rand und erstem, bzw. letztem Element in der Zeile, zwischen den Elementen ist der gleiche Abstand

Menüpunkt 1
Menüpunkt 2
Menüpunkt 3
Menüpunkt 4
Menüpunkt 5








display:flex;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;height:100px

center > Horizontale Zentrierung der Elemente
flex-start > linksausgerichtet
flex-end > rechtssausgerichtet
space-around > zwischen den einzelnen Elementen ist der gleiche Abstand (jeweils pro Zeile) und der gleiche Abstand besteht zwischen dem linken Rand zum 1. Element, sowie zwischen dem rechten Rand und dem letzten Element (jeweils pro Zeile).
space-between > es gibt keinen Abstand zwischen Rand und erstem, bzw. letztem Element in der Zeile, zwischen den Elementen ist der gleiche Abstand

Menüpunkt 1
Menüpunkt 2
Menüpunkt 3
Menüpunkt 4
Menüpunkt 5








display:flex;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-content:flex-end;height:200px

center > Horizontale Zentrierung der Elemente (default)
flex-start > Ausrichtung links
flex-end > Ausrichtung rechts
space-around > zwischen Rand links und dem 1. Element ist der gleiche Abstand wie zwischen dem Rand rechts und der letzten Element. Und zwischen den einzelnen Elementen ist der gleiche Abstand
space-between > zwischen den Elementen und dem Rand (links und rechts) ist kein Abstand. Zwischen den Elementen ist der gleiche Abstand
stretch > kein Abstand vom Rand (links und rechts) zu den Elementen.

Menüpunkt 1
Menüpunkt 2
Menüpunkt 3
Menüpunkt 4
Menüpunkt 5
Menüpunkt 6
Menüpunkt 7
Menüpunkt 8
Menüpunkt 9
Menüpunkt 10








display:flex;display:flex;flex-direction:column;flex-wrap:wrap;justify-content:center;align-content:flex-end;height:200px

center > Vertikale Zentrierung der Elemente (default)
flex-start > Ausrichtung oben
flex-end > Ausrichtung unten
space-around > zwischen Rand oben und 1. Zeile ist der gleiche Abstand wie zwischen dem Rand unten und der letzten Zeile. Und zwischen den einzelnen Zeilen ist der gleiche Abstand
space-between > zwischen den Elementen und dem Rand (oben und unten) ist kein Abstand. Zwischen den Elementen ist der gleiche Abstand
stretch > kein Abstand vom Rand oben zur 1. Zeile. Gleicher Anstand zwischen den einzelnen Zeilen und zischen der Letzten Zeile und dem Abstand zum Rand unten

Menüpunkt 1
Menüpunkt 2
Menüpunkt 3
Menüpunkt 4
Menüpunkt 5
Menüpunkt 6
Menüpunkt 7
Menüpunkt 8
Menüpunkt 9
Menüpunkt 10








display:flex;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:flex-end;height:200px

center > Zentrierung innerhalb der Höhe der Elemente
flex-start > Ausrichtung oben (default)
flex-end > Ausrichtung unten
stretch > Strecken der Höhe


Menüpunkt 1
Menüpunkt 2
Menüpunkt 3
Menüpunkt 4
Menüpunkt 5
Menüpunkt 6
Menüpunkt 7
Menüpunkt 8
Menüpunkt 9
Menüpunkt 10








display:flex;display:flex;flex-direction:column;flex-wrap:wrap;justify-content:center;align-items:center;height:200px

center > Zentrierung innerhalb der Höhe der Elemente
flex-start > Ausrichtung oben (default)
flex-end > Ausrichtung unten
stretch > Strecken der Höhe


Menüpunkt 1
Menüpunkt 2
Menüpunkt 3
Menüpunkt 4
Menüpunkt 5
Menüpunkt 6
Menüpunkt 7
Menüpunkt 8
Menüpunkt 9
Menüpunkt 10






Wie kann ich ein Element perfekt zenztrieren?

justify-content:center;align-items:center
perfekte Zentrierung














width:100%;height:300px;display:flex; (alle Elemente gleiche Breite mit flex:1;)



Menüpunkt 1
Menüpunkt 2
Menüpunkt 3
align-self:flex-end;
Menüpunkt 4








width:100%;height:300px;display:flex; (alle Elemente gleiche Breite mit flex:1. Das breitere Element soll doppelt so breit sein mit flex:2;)



Menüpunkt 1
Menüpunkt 2
flex:2;
Menüpunkt 3
align-self:center;
Menüpunkt 4








width:100%;height:300px;display:flex; (die Reihenfolge der Elemente vertauschen mit order: #)



Menüpunkt 1
Menüpunkt 2
flex:2;
Menüpunkt 3
order:4;
Menüpunkt 4








width:100%;height:300px;display:flex; (Das Element, dass 8x schneller wächst flex-grow: 8;)



Menüpunkt 1
Menüpunkt 2
Menüpunkt 3
flex-grow:8;
Menüpunkt 4








width:100%;height:300px;display:flex; (Das Element, dass nicht schrumpfen soll flex-shrink: 0;)



Menüpunkt 1
Menüpunkt 2
Menüpunkt 3
flex-shrink:0;
Menüpunkt 4








width:100%;height:300px;display:flex; (Initialbreite des Elements flex-basis:400px;)



Menüpunkt 1
Menüpunkt 2
Menüpunkt 3
flex-basis:400px;
Menüpunkt 4




nicht-wachsend (0), nicht-schrumpfend (0), Initialbreite in Pixeln
flex: 0 0 200px
flex: 1 0 auto; (wachsend, nicht schrumpfend, alle Elemente zusammen 100%

margin: 0 5px;




row ⇔ column ⇕
justify-content: justify-content:
align-content: align-content:
align-items: align-items:
bei -reverse wird justify-content gespiegelt :)