An der linken unteren Ecke kannst du die Größe der obigen Demonstrationen verändern.
Vorraussetzung
Ein Elternelement wird mit css display:flex als flex-Container ausgezeichnet. Die unmittelbaren Kindelemente werden dadurch zu flex-items und können nun, mittels passenden CSS Attributen im Container oder im Item selber, manipuliert werden.
Sinn
Das Flexible Box Layout Module (kurz flexbox) ist ein starkes Tool um mehrere Elemente eindimensional anzuordnen ohne die Notwendigkeit von genauen Größen-, Float- oder Positionsangaben. Eindimensional heißt, die Elemente werden zeilen oder spaltenweise angeordnet, nicht jedoch beides gleichzeitig, dafür eignet sich stattdessen das grid-Layout. Durch optionalem Umbruch von Elementen am Container-Rand entsteht eine Ausnahme zu der eindimensionalen Anordnung.
Eine flexbox ändert die Größe und Position seiner Elemente mit Rücksicht auf den Inhalt und Angaben wie min-width oder min-height so, dass sie auch beim Ändern der Anzeigegröße gut aussehen, daher eignet es sich zur Erstellung von Teilen von Webseiten (zb. Navigationsleiste, kleine Strukturen) die auf verschieden großen Geräten gut aussehen sollen.
Eigenschaften für das Elternelement
display:flex
Damit wird dieses Element zum flex-Container und alle direkten Kindelemente zu flex-items
flex-direction
Gibt die Richtung in die die Flex-Items ausgerichtet werden sollen (die Hauptaxe). Mögliche Werte:
row (Standard)
column
row-reverse
column-reverse
flex-wrap
Gibt an, ob Zeilenumbruch stattfinden soll. Mögliche Werte:
nowrap (Standard)
wrap
wrap-reverse
justify-content
Gibt an, wie die Flex-Items entlang der Hauptaxe verteilt werden sollen, wenn noch Platz übrig ist. Dies passiert zum Beispiel, wenn die Items eine feste oder maximale Höhe/Breite haben, oder nicht genug Inhalt haben, um die gesamt Box auszufüllen. Mögliche Werte:
flex-start (Standard)
flex-end
center
space-between
space-around
space-evenly
align-items
Gibt an, wie die Flex-Items entlang der Kreuzungsaxe verteilt werden sollen, wenn noch Platz ist. Standardmäßig dehnen Sie sich aus, um die gesamte Höhe/Breite des Elternelements auszufüllen, es sei denn sie haben eine fixe oder maximale Höhe/Breite.
flex-start
flex-end
center
baseline
stretch (Standard)
align-content
Gibt bei mehreren Zeilen an, wie die Zeilen im verfügbaren Raum aufgeteilt werden sollen. Standardmäßig dehnen Sie sich aus, um die gesamte Höhe/Breite einzunehmen.
flex-start
flex-end
center
space-between
space-around
stretch (Standard)
Eigenschaften für die Kindelemente
order
Standardmäßig werden Items anhand ihrer Reihenfolge im HTML-Code angezeigt. Hiermit kann eine andere Reihenfolge festgelegt werden. Der Standardwert dieser Eigenschaft ist 0, daher kann mit negativen/positiven Zahlen ein Item vor/nach der HTML-Reihenfolge angezeigt werden.
flex-grow
Diese Eigenschaft erhält eine einheitenlose Zahl, die die Proportionen der Größe aller Items festlegt. Ein Element mit flex-grow:2 dehnt sich doppelt so viel aus wie ein Element mit flex-grow:1
flex-shrink
???
flex-basis
Legt die Größe eines Elementes fest, bevor es vergrößert oder verkleinert wird um den freien Platz auszufüllen. Mit dem Standard-Wert auto wird die widhth/height Eingeschaft angeschaut.
flex
Shorthand für die letzten drei Eigenschaften
align-self
Damit kann dieses Element die in align-items festgelegte Einstellung überschreiben und an einem anderen Punkt auf der Kreuzungsaxe platziert werden.