Show Menu

Flex Box german Cheat Sheet by

Erklärt die wichtigsten Attribute um Layouts mit dem Flex Box Modul zu erstellen
css     html     flex     dynamic     layout

Hinter­grund

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.
Das Flexbox Layout ist ideal geeignet für die Kompon­enten einer Anwendung und Layout mit einem kleinen Maßstab. Das Raster Layout (Grid) hingegen ist für größere Maßstäbe gedacht.

Eltern Container

display

Definiert einen Flex Container

Code:
.cont­ainer {
display: flex / oder inline­-flex / ;
}
CSS-Co­lumns haben keinen Einfluss auf einen Flex-C­ont­ainer

flex-d­ire­ction

flex-d­ire­ction

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:
.cont­ainer {
flex-­dir­ection: row | row-re­verse | column | column­-re­verse ;
}
row(de­fault): ordnet von links nach rechts an
row-re­vers: ordnet von rechts nach links an
column: ordnet von oben nach unten an
column­-re­verse: ordnet die Elemente von unten nach oben an.

flex-wrap

flex-wrap

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:
.cont­ainer {
flex-­wrap: nowrap | wrap | wrap-r­everse ;
}
nowrap (Stand­ard): Anordnung in einer Zeile von lnks nach rechts
wrap: Anordnung in mehreren Zeilen von links nach rechts
wrap-r­everse: Anordnung in mehreren Zeilen von rechts nach links

align-­items

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

Code:
.cont­ainer {
align­-items: flex-start | flex-end | center | stretch | baseline ;
}

flex­-st­art: Alle Elemente werden am oberen Rand des Eltern Containers angeor­dnet.
flex­-end: Alle Elemente werden am unteren Rand des Eltern Containers angeor­dnet.
cent­er: Alle Elemente werden mittig im Eltern Container angeor­dnet.
stre­tch (Stand­ard): Streckt alle Kind Elemente bis an den oberen und unteren Rand des Eltern Contai­ners.
base­line: Alle Elemente werden entlang der Basislinie ihres Inhaltes ausger­ichtet.
Man kann align­-items als vertikale Version von justi­fy-­con­tent betrac­hten.

align-­items

Kind Elemente

order

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> ...;
}

order

align-self

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.
float, clear und verti­cal­-align haben keinerlei Auswir­kungen auf ein Flex Element.

align-self

 

Grundlagen und Termin­ologie

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-­flo­w-­Fluss.

Flexbox Model

Legende

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.

flex-flow

Dies ist eine Kurzform für die Attribute flex-­dir­ection und `flex-­wrap, die zusammen das Verhalten für Quer und Längsachse eines Flex Containers defini­eren.

Code:
.cont­ainer {
flex-­flow: <fl­ex-­dir­ect­ion> || <fl­ex-­wra­p> ;
}
Standa­rdv­erh­alten ist row nowrap

justif­y-c­ontent

Definiert die Anordnung entlang der hori- zontalen Achse. justi­fy-­con­tent 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:
.cont­ainer {
justi­fy-­con­tent: flex-start | flex-end | center |space­-be­tween | space-­around ;
}

flex­-st­art (Stand­ard): Die Elemente werden zum Anfang hin, nach links, versch­oben.
flex­-end: Die Elemente werden zum Ende hin, nach rechts, versch­oben.
cent­er: Die Elemente werden in der Mitte angeor­dnet.
spac­e-b­etw­een: Die Elemente werden gleich­fürmig über die Zeile verteilt. Erstes Element ganz links, das Letzte ganz rechts.
spac­e-a­rou­nd: 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.
Bei space­-ar­ound muss beachtet werden, da jedes Element immer den selben Abstand zum nächstgen Element hat, erzeugt das eine optisch ungleiche Vertei­lung. Das liegt daran, dass beim ersten Element links nur ein Abstand ist, aber zwischen den Elementen immer sich zwei Abstände addieren.

justif­y-c­ontent

align-­content

Ordnet die Zeilen der Kind Elemente an, sollte es noch Platz geben in der Horizo­ntalen. Ähnlich wie justi­fy-­con­tent indivi­duelle Elemente an der Hauptachse ausric­htet.

Code:
.cont­ainer {
align­-co­ntent: flex-start | flex-end | center | stretch | space-­between | space-­around ;
}

flex­-st­art: Richtet alle Zeilen nach oben links am Eltern Container aus.
flex­-end: Richtet alle Zeilen nach unten links am Eltern Container aus.
cent­er: Richtet alle Elemente mittig im Eltern Container aus.
stre­tch (Stand­ard): Richtet alle Elemente mittig im Eltern Container aus und verteilt sie gleich­mäßig die Höhe der Elemente.
spac­e-b­etw­een: Richtet alle Zeilen über die volle Höhe des Eltern Containers aus. Die erste und letzte Zeile werden ganz an den Eltern Container angelegt.
spac­e-a­rou­nd: 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 justi­fy-­con­tent entsteht.
Hat keine Auswir­kungen wenn es nur eine Zeile an Kind Elementen gibt.

align-­content

flex-grow

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-­gro­wauf 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> ;
}
Negative Zahlen sind nicht zulässig! Der Standa­rdwert für flex-­grow ist 0.

flex-grow

flex-s­hrink

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

Code:
.element {
flex-­shrink: <za­hl> ;
}
Standa­rde­ins­tellung für den Zahlenwert ist 1. Negative Zahlen sind nicht erlaubt.

flex-basis

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-c­ont­ent, min-c­ont­entund fit-c­ont­ent.

Code:
.element {
flex-­basis: <we­rt> | <sc­hlü­sse­lwo­rt> ;
}
Wird der Wert auf 0ges­etzt,

flex-basis

Download the Flex Box german Cheat Sheet

4 Pages
//media.cheatography.com/storage/thumb/the-exilant_flex-box-german.750.jpg

PDF (recommended)

Alternative Downloads

Share This Cheat Sheet!

 

Comments

No comments yet. Add yours below!

Add a Comment

Your Comment

Please enter your name.

    Please enter your email address

      Please enter your Comment.

          Related Cheat Sheets

          AngularJS Material Layout Cheatsheet Cheat Sheet

          More Cheat Sheets by The Exilant

          CSS Background Properties Cheat Sheet
          Sublime Text 3 (german) Keyboard Shortcuts