Flex Box german Cheat Sheet by The Exilant

Um einen mit Flex Boxen zu arbeiten, muss man einen Flex-C­ont­ainer defini­eren, welcher, als Eltern­-El­ement, die Flex Elemente umschl­ießt. Ob sich der Flex Container wie ein inline oder ein block-­Element verhält, bestimmt der gegebene Wert.
Hat man einen Flex Container definiert, so bestimmt dieser die flex Eigens­chaften der beinha­lteten Kind-E­lem­ente.
Das Flexbox Layout ist ein Modul zielt darauf ab, einen effizi­enteren Weg anzubi­eten, um den Platz zu verteilen, aufzut­eilen und auszur­ichten, welchen Elemente einnehmen. Selbst wenn deren Größe nicht bekannt ist und/oder dynamisch. Daher auch der Begriff "­Fle­x".

Die Hauptidee hinter dem Flex Layout ist es, einem Container die Fähigkeit zu verleihen, die Höhe/B­reite der Elemente seines Inhaltes zu verändern und anzuor­dnen, um den verfüg­baren Platz bestmö­glich auszun­utzen. Primär um sich bestmö­glich an alle Arten von Displays und Auflös­ungen anzupa­ssen.

Definiert einen Flex Container

Code:

.container {

display: flex / oder inline­-flex / ;

}

definiert die Haupta­chse, an der die Flex-E­lemente im Flex-C­ont­ainer angeordnet werden. Flexbox ist ein Layout Konzept, gedacht ist um nur in eine Richtung gerichtet ist. Flex Elemente werden entweder in horizo­ntalen oder vertikalen Spalten ausger­ichtet.

Code:

.container {

flex-d­ire­ction: row | row-re­verse | column | column­-re­verse ;

}

Von Haus aus versuchen alle Flex-E­lemente sich in einer Zeile anzuor­dnen. Ändern kann man dies mit dem

flex-wrap

Attribut. Die Richtung spielt auch eine Rolle, in dem sie bestimmt, in welcher Richtung die neue Zeile aufgefüllt wird.

Code:

.container {

flex-wrap: nowrap | wrap | wrap-r­everse ;

}

Definiert das Standa­rdv­erh­alten wie Kind Elemente entlang der Hauptachse angeordnet werden.

Code:

.container {

align-­items: flex-start | flex-end | center | stretch | baseline ;

}

flex-start: Alle Elemente werden am oberen Rand des Eltern Containers angeor­dnet.
flex-end: Alle Elemente werden am unteren Rand des Eltern Containers angeor­dnet.
center: Alle Elemente werden mittig im Eltern Container angeor­dnet.
stretch (Stand­ard): Streckt alle Kind Elemente bis an den oberen und unteren Rand des Eltern Contai­ners.
baseline: Alle Elemente werden entlang der Basislinie ihres Inhaltes ausger­ichtet.

Grunds­ätzlich werden flex-E­lemente in der Reihen­folge, wie sie im Quelltext stehen angezeigt.
Jedoch lässt sich, mittels

order

, eine eigene Reihen­folge vorgeben, in welcher die Elemente angezeigt werden.

Code:

.item {

order: <in­teg­er> <in­teg­er> ...;

}

Erlaubt es, die Standa­rda­usr­ichtung oder der Ausric­htung, welche mittels

align-item

definiert wurde, für ein einzelnes Kind Element zu übersc­hre­iben.

Code:

.item {

align-­self: auto | flex-start | flex-end | center | baseline | stretch ; 

}

Es gelten die gleichen Erklär­ungen der Attrib­utw­erte, wie sie für

align-­items

gelten.

Da Flexbox ein komplettes Modul ist und nicht nur ein einzelnes Attribut, beinhaltet es selbst eine ganze Anzahl an Attrib­uten. Einige davon werden auf den umschl­ies­senden Eltern Container angewe­ndet, andere auf dessen Kind-E­lem­ente.
Während ein normales Layout sowohl auf block als auch auf inline Fließr­ich­tungen aufgebaut ist, basiert das Flexbox Layout auf dem flex-flow-Fluss.

Attribute welche auf die Eltern Container angewendet werden, haben ein dunkleres Blau und Kind Elemente sind mit einem helleren Blau als dem, welches für Inform­ationen verwendet wurde.

Dies ist eine Kurzform für die Attribute

flex-d­ire­ction

und `flex-­wrap, die zusammen das Verhalten für Quer und Längsachse eines Flex Containers defini­eren.

Code:

.container {

flex-flow: <fl­ex-­dir­ect­ion> || <fl­ex-­wra­p> ;

}

Definiert die Anordnung entlang der hori- zontalen Achse.

justif­y-c­ontent

hilft den übrigen freien Raum zu verteilen, wenn alleEl­emente in der Zeile unflexibel sind, oder wenn sie zwar flexibel sind, aber ihre maximale Größe bereits erreicht haben. Ermöglicht weiter die Anordnung von Elementen, wenn sie die Zeilen­breite übersc­hreiten würden.

Code:

.container {

justif­y-c­ontent: flex-start | flex-end | center |space­-be­tween | space-­around ;

}

flex-start (Stand­ard): Die Elemente werden zum Anfang hin, nach links, versch­oben.
flex-end: Die Elemente werden zum Ende hin, nach rechts, versch­oben.
center: Die Elemente werden in der Mitte angeor­dnet.
space-­between: Die Elemente werden gleich­fürmig über die Zeile verteilt. Erstes Element ganz links, das Letzte ganz rechts.
space-­around: Die Elemente werden gleich­mäßig über die Zeile veteilt, haben aber an allen seiten den selben Abstand, sowohl zum Zeilen­anf­ang­/ende, als auch zum nächsten Element.

Ordnet die Zeilen der Kind Elemente an, sollte es noch Platz geben in der Horizo­ntalen. Ähnlich wie

justif­y-c­ontent

indivi­duelle Elemente an der Hauptachse ausric­htet.

Code:

.container {

align-­con­tent: flex-start | flex-end | center | stretch | space-­between | space-­around ;

}

flex-start: Richtet alle Zeilen nach oben links am Eltern Container aus.
flex-end: Richtet alle Zeilen nach unten links am Eltern Container aus.
center: Richtet alle Elemente mittig im Eltern Container aus.
stretch (Stand­ard): Richtet alle Elemente mittig im Eltern Container aus und verteilt sie gleich­mäßig die Höhe der Elemente.
space-­between: Richtet alle Zeilen über die volle Höhe des Eltern Containers aus. Die erste und letzte Zeile werden ganz an den Eltern Container angelegt.
space-­around: Verteilt die Platz zwischen den Zeilen gleich­mäßig. Jedoch ist auch hier das selbe optische "­ung­lei­chg­ewi­cht­" zu beachten, wie es auch bei

justif­y-c­ontent

entsteht.

Definiert die Fähigkeit eines Elementes seine Größe zu verändern, sollte es nötig sein.

flex-grow

akzeptiert einhei­tenlose Werte als Propor­tion. Dies definiert wie viel des maximalen Platzes ein Elementes, innerhalb eines Contai­ners, ausnutzen kann.
Haben alle Elemente das Attribut

flex-grow

auf 1 gesetzt bekommen, wird der Platz zwischen den Elementen gleich­mäßig unter seinen Kind-E­lem­enten aufget­eilt.

Code:

.item {

flex-grow: <Za­hl> ;

}

Definiert die Fähigkeit eines Kind Elementes zu schrum­pfen.

Code:

.element {

flex-s­hrink: <za­hl> ;

}

Definiert die Ausgan­gsgröße eines Elementes bevor der verbli­ebene Platz verteilt wird. Es kann sowohl ein Prozen­twert (z.B. 25%), als auch ein fixer Wert (z.B. 3em|125px) angegeben werden. Aber auch ein Schlüs­selwort ist möglich. Der Schlüssel

auto

bedeutet, "­beziehe dich auf die mir zugewi­esene Breite­/Hö­he". Der Schlüssel

content

bedeutet, die Größe ist anhängig vom Inhalt. Leider wird dieser Schlüssel noch nicht sonderlich gut unters­tützt, daher ist es schwierig zu sagen, wie das Element sich verhält, ganz zu schweigen von seinen Abarten

max-co­ntent

,

min-co­ntent

und

fit-co­ntent

.

Code:

.element {

flex-b­asis: <we­rt> | <sc­hlü­sse­lwo­rt> ;

}