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
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 :)