Eigenschaften für den Flex-Container

display: flex
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;

frageantwort
Entferne mal display: flex aus dem Quellcode.section { }
flex-direction
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.

Eigenschaft flex-direction

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;

Werte für flex-direction

WertBedeutung
row;Die Flex-Kinder werden hübsch in einer Reihe angeordnet. Sieht auf den ersten Blick aus wie Float. Aber die Höhe kollabiert nicht! Das ist der Standardwert.
column;Die Flex-Kinder werden vertikal als Säule angeordnet. Entspricht isoliert betrachtet dem Verhalten von display:block Elementen.
row-reverse;Entspricht dem Wert row mit umgedrehter Reihenfolge.
column-reverse;Entspricht dem Wert column mit umgedrehter Reihenfolge.

frageantwort
Ändere die Reihenfolge der Flex-Kinder und lass sie an der linken Seite beginnen.section {flex-direction: row; -webkit-flex-direction: row;}
Die Flex-Kinder sollen übereinander angezeigt werden.flex-direction: column -reverse; -webkit-flex-direction: column-reverse;

ODER flex-direction: column ; -webkit-flex-direction: column;
flex-wrap
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.

Eigenschaft flex-wrap

CSSBedeutungWerte
flex-wrap:Erlaubt oder Verbietet den Umbruch in neue Zeile(n) (ROW) bzw. weitere Säulen (COLUMN.)nowrap; wrap; wrap-reverse;

Werte für flex-wrap

WertBedeutung
nowrap;Die Flex-Kinder werden in einer Zeile angeordnet. Standardwert.
wrap;Die Flex-Kinder verteilen falls nötig sich auf mehreren Zeilen.
wrap-reverse;Die Flex-Kinder verteilen falls nötig sich auf mehreren Zeilen und werden in umgedrehter Reihenfolge dargestellt.

frageantwort
Dreh die Reihenfolge der Flex-Kinder umflex-wrap: wrap-reverse; flex-wrap-webkit: wrap-reverse;
Alle Flex-Kinder sollen auf jeden Fall in einer Zeile stehen.flex-wrap: nowrap; -webkit-flex-wrap: nowrap;
flex-flow
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.

Eigenschaft flex-flow

CSSBedeutungWerte
flex-flow:Praktische Kurzschrift für eine Kombination der Werte von FLEX-DIRECTION und FLEX-WRAP.z.B. row wrap-reverse;

Erster Wert bei flex-flow (flex-direction)

WertBedeutung
row;Die Flex-Kinder werden hübsch in einer Reihe angeordnet. Sieht auf den ersten Blick aus wie Float. Aber die Höhe kollabiert nicht! Das ist der Standardwert.
column;Die Flex-Kinder werden vertikal als Säule angeordnet. Entspricht isoliert betrachtet dem Verhalten von display:block Elementen.
row-reverse;Entspricht dem Wert row mit umgedrehter Reihenfolge.
column-reverse;Entspricht dem Wert column mit umgedrehter Reihenfolge.

Zweiter Wert bei flex-flow (flex-wrap)

WertBedeutung
nowrap;Die Flex-Kinder werden in einer Zeile angeordnet. Standardwert.
wrap;Die Flex-Kinder verteilen falls nötig sich auf mehreren Zeilen.
wrap-reverse;Die Flex-Kinder verteilen falls nötig sich auf mehreren Zeilen und werden in umgedrehter Reihenfolge dargestellt.

frageantwort
Die Flex-Kinder sollen übereinander angezeigt werden.flex-flow: column wrap; -webkit-flex-flow: column wrap
Die Flex-Kinder sollen in umgedrehter Reihenfolge angezeigt werden aber am linken Rand beginnenjustify-content: flex-end; -webkit-justify-content: flex-end;
flex-flow: row-reverse wrap; -webkit-flex-flow: row-reverse wrap;
justify-content
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 justify-content

CSSBedeutungWerte
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;

Werte für justify-content

WertBedeutung
flex-start;Die Flex-Kinder werden oben links beginnend angeordnet. Standard Wert.
flex-end; Die Flex-Kinder beginnen am Ende des Flex-Containers.
center; Die Flex-Kinder werden im Flex-Container zentriert.
space-between;Die Flex-Kinder werden im Flex-Container zentriert und der Raum zwischen den Kindern wird auf der X-Achseaufgeteilt.
space-around;Die Flex-Kinder werden im Flex-Container zentriert und der Raum zwischen Rand und Kindern sowie zwischen ihnen wird auf der X-Achse aufgeteilt.

frageantwort
Der Raum zwischen den Flex-Kindern soll ausgeglichen werden.justify-content: space-between; -webkit-justify-content: space-between;
Der gesamte Raum zwischen den Flex-Kindern und auch dem Abstand zum flex-Container soll ausgeglichen werden.justify-content: space-around; -webkit-justify-content: space-around;
Die Flex-Kinder sollen in umgedrehter Reihenfolge angezeigt werden aber am linken Rand beginnenjustify-content: flex-end; -webkit-justify-content: flex-end;
flex-flow: row-reverse wrap; -webkit-flex-flow: row-reverse wrap;
align-items
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 align-items

CSSBedeutungWerte
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;

Werte für align-items

WertBedeutung
flex-start;Die Flex-Kinder werden oben links beginnend angeordnet. Standard Wert.
flex-end; Die Flex-Kinder beginnen am Ende des Flex-Containers.
center; Die Flex-Kinder werden im Flex-Container zentriert.
baseline;Die Flex-Kinder werden registerhaltig auf der Grundlinie ihrer ersten Zeile angeordnet..
stretch;Die Höhe der Flex-Kinder wird an die Höhe des Flex-Containers angepasst. Das ist der Standard. Stretch gilt also immer so lange Du keine andere Eigenschaft zuordnest.

frageantwort
Die Höhe der Flex-Kinder soll angeglichen werden.align-items: stretch; -webkit-align-items: stretch;
Die Flex-Kinder sollen auf registerhaltiger Grundlinie angezeigt werdenalign-items: center; -webkit-align-items: center;
align-content
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 align-content

CSSBedeutungWerte
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;

Werte für align-content

WertBedeutung
flex-start;Die Flex-Kinder werden oben links beginnend angeordnet. Standard Wert.
flex-end; Die Flex-Kinder beginnen am Ende des Flex-Containers.
center; Die Flex-Kinder werden im Flex-Container zentriert.
stretch;Die Höhe der Flex-Kinder wird an die Höhe des Flex-Containers angepasst. Das ist der Standard. Stretch gilt also immer so lange Du keine andere Eigenschaft zuordnest.
space-between;Der Raum der Y-Achse zwischen den Zeilen der Flex-Kinder wird aufgeteilt.
space-around;Der Raum der Y-Achse zwischen den Zeilen der Flex-Kinder und zwischen dem Rand des Flex-Containers wird aufgeteilt.

frageantwort
Alle Zwischenabstände sollen aufgeteilt werden.align-content: space-around; -webkit-align-content: space-around;
Nur der Abstand zwischen den Flex-Kindern soll aufgeteilt werden.align-content: space-between; -webkit-align-content: space-between
► Weitere Infos

Externe Quellen

Kompatibilität

http://caniuse.com/#feat=flexbox

Die Unterstützung für die Eigenschaften des Flex-Container und der Flex-Items durch die heute gängigen Browser ist in Verbindung mit den Vendor-Prefixen sehr gut.


W3C CSS Flexible Box
Layout Module Level 1

http://http://www.w3.org/TR/css-flexbox-1/

Original Entwurf der W3C für das Flexbox Modell.


selfhtml.wiki

http://wiki.selfhtml.org/wiki (...) Flexbox

Umfangreiche deutsche Erklärung.


Flex-Box Beispiele

http://www.flexboxpatterns.com/home

Hübsche Beispiele für Interface Elemente die mit Flexbox umgesetzt sind.


Artikel bei CSS-Tricks

https://css-tricks.com (...) a-guide-to-flexbox/

Englischer Artikel mit interessanten Infos rund um das Thema Flexbox.


Artikel bei Webkrauts

http://webkrauts.de (...) css3-flexbox-abloesung-fuer-float-layouts

Älterer und immer noch lesenswerter deutscher Artikel.


Editor Flexbox Playground

https://scotch.io/ (...) css3-flexbox-flexbox-playground

Englischer Editor zum Experimentieren mit Vorschau in Echtzeit.

Schreibe einen Kommentar

Deine E-Mail Adresse wird später nicht angezeigt.

clear formSubmit