Anwendungsbeispiele
für typische Flex-Komponenten

Flex Menu I

Hinweis: Das Eltern-Element hat display: FLEX. Direkte Kinder haben FLEX-BASIS: 100%. Bei einem :HOVER haben die Kinder flex-basis: 120%. Diese drei Flex-Eigenschaften reichen für den Effekt aus. Natrülich wirkt FLEX im Kontext der anderen CSS Eigenschaften, so spielt TRANSITION hierbei eine wesentliche Rolle.

Display: FLEX

WerteBedeutung
flex;Das Element verhält sich wie ein Block-Element. Sein Inhalt reagiert auf die Flexbox Eigenschaften. Sehr praktisch zum dynamischen horizontalen und vertikalen Ausrichten von Elementen. Zentrieren geht mit FLEX sehr leicht.
inline-flex;Das Element verhält sich wie ein Inline-Element. Sein Inhalt reagiert auf die Flexbox Eigenschaften. Sehr praktisch zum dynamischen horizontalen und vertikalen Ausrichte von Elementen.

Eigenschaften für den Flex-Container

CSSBedeutungWerte
flex-direction:Positionierung der Kinder entweder auf einer Zeile nebeneinander oder als Säule übereinander. Die FLEX-DIRECTION hat Auswirkungen auf die Eigenschaften. Bei ROW entspricht die Hauptachse der X-Achse. Bei COLUMN entspricht die Hauptachse der Y-Achse. row; column; row-reverse; column-reverse;
flex-wrap:Erlaubt oder Verbietet den Umbruch in neue Zeile(n) (ROW) bzw. weitere Säulen (COLUMN.)nowrap; wrap; wrap-reverse;
flex-flow:Praktische Kurzschrift für eine Kombination der Werte von FLEX-DIRECTION und FLEX-WRAP.z.B. row wrap-reverse;
justify-content:Ausrichtung der Kinder auf der Hauptachse. Das ist bei ROW die X-Achse und bei COLUMN die Y-Achse.flex-start; flex-end; center; space-between; space-around;
align-items:Ausrichtung der Anfangszeile der Kinder auf der Kreuzachse. Die Kreuzachse ist bei ROW die Y-Achse und bei COLUMN die X-Achse.flex-start; flex-end; center; baseline; stretch;
align-content:Ausrichtung des Zwischenraum der Kinder auf der Kreuzachse. Die Kreuzachse ist bei ROW die Y-Achse und bei COLUMN die X-Achse.flex-start; flex-end; center; space-between; space-around; stretch;

Eigenschaften für Flex-Kinder

CSSBedeutungWerte
order:Reihenfolge der Flex-Kinder kann unabhängig vom HTML-Markup angepasst werden.1; 10; (etc.)
flex-grow:Vergrößert das Flex-Kind relativ zu den anderen Flex-Kindern. Standardwert ist 0.2;
flex-basis:Passt die Breite bzw. Höhe auf den "gewünschten" Wert an. Dabei wird das gewohnte CSS Boxmodell angewendet. Je nach flex-direction wird die Breite (row) bzw. die Höhe (column) angepasst. Dient als Bezugspunkt für flex-shrink. Es ist empfohlen mit der Kurzschreibweise flex: zu arbeiten um -grow, -shrink und -basis zusammenfassend anzugeben.40px; auto;
flex-shrink: Verkleinert das Flex-Kind relativ zu den anderen Flex-Kindern sobald der Platz nicht ausreicht. Standardwert ist 1.4;
flex:Praktische Kurzschreibweise für flex-grow, flex-shrink und flex-basis. Dabei sind flex-shrink und flex-basis optional. Der Standardwert ist 0 1 auto,3 1 auto;
align-self:Individuelles Verhalten des Flex-Kindes. Die möglichen Werte sind von align-items.auto; flex-start; flex-end; center; baseline; stretch;

Single Page Layout

Hinweis: FLEX ist für das Layout von Komponenten, z.B. NAV oder ARTICLE gemacht. Es ersetzt nicht die W3C GRID Candidate Recommendation für das Zusammenspiel der Bereiche im Sinne eines Gestaltungsrasters. Layout einer Seite mit FLEX bedeutet dass FLEX bei bestimmten Komponenten zum Einsatz kommt. FLEX gestaltet im Beispiel die einzelnen ARTICLE. Das restliche Layout erfolgt mit den konventionellen CSS Eigenschaften. Im Beispiel werden Variationen im Layout mit :PSEUDO-CLASS erzielt. Der letzte ARTICLE hat z. B. automatisch ein großes Bild. Bemerkenswert ist auch, dass FLEX bei Bildern "irgendwie" besser funktioniert, wenn diese in einen Container gepackt werden. Bei FLEX werden Breiten angepasst. Das ist ein Feature, kein Nachteil. Je nach Bild und Überschrift variiert das Layout ewas. Der große Vorteil von FLEX gegenüber FLOAT sind außerdem die dynamischen Höhen. Je nachdem wie Hoch der Inhalt ist, es funktioniert. Das ist bei FLOAT nicht der Fall. Bei FLOAT sind die Höhen am Besten fix eingestellt. FLEX wirkt nur auf der ersten Kinder-Ebene. Ein FLEX-Kind kann selber zu einem FLEX-CONTAINER werden.

Display: FLEX

WerteBedeutung
flex;Das Element verhält sich wie ein Block-Element. Sein Inhalt reagiert auf die Flexbox Eigenschaften. Sehr praktisch zum dynamischen horizontalen und vertikalen Ausrichten von Elementen. Zentrieren geht mit FLEX sehr leicht.
inline-flex;Das Element verhält sich wie ein Inline-Element. Sein Inhalt reagiert auf die Flexbox Eigenschaften. Sehr praktisch zum dynamischen horizontalen und vertikalen Ausrichte von Elementen.

Eigenschaften für den Flex-Container

CSSBedeutungWerte
flex-direction:Positionierung der Kinder entweder auf einer Zeile nebeneinander oder als Säule übereinander. Die FLEX-DIRECTION hat Auswirkungen auf die Eigenschaften. Bei ROW entspricht die Hauptachse der X-Achse. Bei COLUMN entspricht die Hauptachse der Y-Achse. row; column; row-reverse; column-reverse;
flex-wrap:Erlaubt oder Verbietet den Umbruch in neue Zeile(n) (ROW) bzw. weitere Säulen (COLUMN.)nowrap; wrap; wrap-reverse;
flex-flow:Praktische Kurzschrift für eine Kombination der Werte von FLEX-DIRECTION und FLEX-WRAP.z.B. row wrap-reverse;
justify-content:Ausrichtung der Kinder auf der Hauptachse. Das ist bei ROW die X-Achse und bei COLUMN die Y-Achse.flex-start; flex-end; center; space-between; space-around;
align-items:Ausrichtung der Anfangszeile der Kinder auf der Kreuzachse. Die Kreuzachse ist bei ROW die Y-Achse und bei COLUMN die X-Achse.flex-start; flex-end; center; baseline; stretch;
align-content:Ausrichtung des Zwischenraum der Kinder auf der Kreuzachse. Die Kreuzachse ist bei ROW die Y-Achse und bei COLUMN die X-Achse.flex-start; flex-end; center; space-between; space-around; stretch;

Eigenschaften für Flex-Kinder

CSSBedeutungWerte
order:Reihenfolge der Flex-Kinder kann unabhängig vom HTML-Markup angepasst werden.1; 10; (etc.)
flex-grow:Vergrößert das Flex-Kind relativ zu den anderen Flex-Kindern. Standardwert ist 0.2;
flex-basis:Passt die Breite bzw. Höhe auf den "gewünschten" Wert an. Dabei wird das gewohnte CSS Boxmodell angewendet. Je nach flex-direction wird die Breite (row) bzw. die Höhe (column) angepasst. Dient als Bezugspunkt für flex-shrink. Es ist empfohlen mit der Kurzschreibweise flex: zu arbeiten um -grow, -shrink und -basis zusammenfassend anzugeben.40px; auto;
flex-shrink: Verkleinert das Flex-Kind relativ zu den anderen Flex-Kindern sobald der Platz nicht ausreicht. Standardwert ist 1.4;
flex:Praktische Kurzschreibweise für flex-grow, flex-shrink und flex-basis. Dabei sind flex-shrink und flex-basis optional. Der Standardwert ist 0 1 auto,3 1 auto;
align-self:Individuelles Verhalten des Flex-Kindes. Die möglichen Werte sind von align-items.auto; flex-start; flex-end; center; baseline; stretch;

Flex Bilder-Menu II

Hinweis: Das Eltern-Element hat display: FLEX. Direkte Kinder haben FLEX-BASIS: 100%. Bei einem :HOVER haben die Kinder flex-basis: 120%. Außerdem wird bei einem :HOVER das Hintergrundbild sichtbar. Fügt man in das Menu weitere Elemente hinzu oder entfernt diese, dann errechnen sich aufgrund von FLEX die Zwischenabstände automatisch. Das Beispiel ist eine Anregung für fancy FLEX. Aus barrierefriere Sicht jedoch durchaus Diskussionswürdig.

Display: FLEX

WerteBedeutung
flex;Das Element verhält sich wie ein Block-Element. Sein Inhalt reagiert auf die Flexbox Eigenschaften. Sehr praktisch zum dynamischen horizontalen und vertikalen Ausrichten von Elementen. Zentrieren geht mit FLEX sehr leicht.
inline-flex;Das Element verhält sich wie ein Inline-Element. Sein Inhalt reagiert auf die Flexbox Eigenschaften. Sehr praktisch zum dynamischen horizontalen und vertikalen Ausrichte von Elementen.

Eigenschaften für den Flex-Container

CSSBedeutungWerte
flex-direction:Positionierung der Kinder entweder auf einer Zeile nebeneinander oder als Säule übereinander. Die FLEX-DIRECTION hat Auswirkungen auf die Eigenschaften. Bei ROW entspricht die Hauptachse der X-Achse. Bei COLUMN entspricht die Hauptachse der Y-Achse. row; column; row-reverse; column-reverse;
flex-wrap:Erlaubt oder Verbietet den Umbruch in neue Zeile(n) (ROW) bzw. weitere Säulen (COLUMN.)nowrap; wrap; wrap-reverse;
flex-flow:Praktische Kurzschrift für eine Kombination der Werte von FLEX-DIRECTION und FLEX-WRAP.z.B. row wrap-reverse;
justify-content:Ausrichtung der Kinder auf der Hauptachse. Das ist bei ROW die X-Achse und bei COLUMN die Y-Achse.flex-start; flex-end; center; space-between; space-around;
align-items:Ausrichtung der Anfangszeile der Kinder auf der Kreuzachse. Die Kreuzachse ist bei ROW die Y-Achse und bei COLUMN die X-Achse.flex-start; flex-end; center; baseline; stretch;
align-content:Ausrichtung des Zwischenraum der Kinder auf der Kreuzachse. Die Kreuzachse ist bei ROW die Y-Achse und bei COLUMN die X-Achse.flex-start; flex-end; center; space-between; space-around; stretch;

Eigenschaften für Flex-Kinder

CSSBedeutungWerte
order:Reihenfolge der Flex-Kinder kann unabhängig vom HTML-Markup angepasst werden.1; 10; (etc.)
flex-grow:Vergrößert das Flex-Kind relativ zu den anderen Flex-Kindern. Standardwert ist 0.2;
flex-basis:Passt die Breite bzw. Höhe auf den "gewünschten" Wert an. Dabei wird das gewohnte CSS Boxmodell angewendet. Je nach flex-direction wird die Breite (row) bzw. die Höhe (column) angepasst. Dient als Bezugspunkt für flex-shrink. Es ist empfohlen mit der Kurzschreibweise flex: zu arbeiten um -grow, -shrink und -basis zusammenfassend anzugeben.40px; auto;
flex-shrink: Verkleinert das Flex-Kind relativ zu den anderen Flex-Kindern sobald der Platz nicht ausreicht. Standardwert ist 1.4;
flex:Praktische Kurzschreibweise für flex-grow, flex-shrink und flex-basis. Dabei sind flex-shrink und flex-basis optional. Der Standardwert ist 0 1 auto,3 1 auto;
align-self:Individuelles Verhalten des Flex-Kindes. Die möglichen Werte sind von align-items.auto; flex-start; flex-end; center; baseline; stretch;

► Weitere Infos

Interne Quellen

Flexbox

http://code.arnoldbodeschule.de/flexcontainer-elternelement/
http://code.arnoldbodeschule.de/flex-items-kinderelemente/

Weiterführende Informationen zu FLEX gibt es in den jeweiligen Sektionen bei CODE.