Einstellungen für den Flex Container

0. Blockelemente ohne display

1. display

display: flex; oder display: inline-flex
-ms-flex: 1; /* IE 10 */

Mit display:flex; werde alle Flex-Items (child Elemente) im Elternelement nebeneinander gestellt.
Sie schrumpfen auf ihre Inhaltsgrösse, ähnlich wie bei float.
Alle Elemente werden auf eine Zeile gestellt.

#samp01 {
  display: flex;
}

2. flex-direction

Die Flex-Items (child Elemente) können in Reihen oder Spalten dargestellt werden.

flex-direction: row | row-reverse | column | column-reverse;
row (default) links > rechts
row-reverse rechts > links
column gleich wie row aber top > bottom
column-reverse gleich wie row-reverse aber bottom > top

#samp02 {
  display: flex;
  flex-direction: row-reverse
}

3. flex-wrap

Mit flex-wrap: nowrap brechen die Flex-Items auf die nächste Zeile um wenn kein Platz mehr vorhanden ist.

flex-wrap: nowrap | wrap | wrap-reverse;
nowrap (default) kein Umbruch, eine Zeile
wrap mehrere Zeilen
wrap-reverse mehrere Zeilen reverse

#samp03 {
  display: flex;
  flex-wrap: wrap;
}

4. flex-flow

2. + 3. = flex-flow, die aktuelle Schreibweise

flex-flow: [flex-direction] + [flex-wrap]
Der default ist row nowrap.

#samp04 {
  display: flex;
  flex-flow: row-reverse wrap-reverse;
}

Einfaches Box Beispiel

#samp1-4 {
	display: flex;
  	flex-flow: row wrap;
  	padding:1%;
	}
#samp1-4 div{
	background: #fc4;
  	margin: 1%;
  	padding: 1%;
  	width: 21%;
  	height:100px;
	}  

5. justify-content

Justify-content bestimmt die Verteilung der Flex-Items auf der Hauptachse. Sind Flex-Items kleiner sind als die Breite, oder die Höhe des Flex-Containers und diesen nicht vollständig ausfüllen.

justify-content: flex-start | flex-end | space-between | space-around;
flex-start (default) Flex-Items sind am Startpunkt (links, oben) ausgerichtet.
flex-end Flex-Items sind am Ende angeordnet
center Flex-Items sind in der Mitte angeordnet.
space-between Das erste Flex-Items steht sich am Start, das letzte am Ende der Reihe. Alle anderen Elemente werden dazwischen angereiht.
space-around Alle Flex-Items haben den selben Zwischenraum.

#samp05 {
	display: flex;
  	flex-flow: row wrap;
	justify-content: space-between;
}

#samp055 {
	display: flex;
  	flex-flow: row wrap;
	justify-content: space-around;
}

6. align-items

Mit align-items wird die Anordnung auf der Hauptachse bestimmt. Mit align-items kann man Flex-Items vertikal an der horizontalen Achse ausrichten, oder auch horizontal an der Querachse. Die Hauptachse wird mit flex-direction definiert.

align-items: flex-start | flex-end | center | baseline | stretch;
flex-start Flex-Items sind Oberkant ausgerichtet.
flex-end Flex-Items sind Unterkant angeordnet.
center Flex-Items sind in der Mitte angeordnet.
baseline Flex-Items werden in der Höhe aufgezogen. Flex-items dürfen keine fixe Höhe / Breite haben, je nach Richtung der definierten Achse. Eine min-height wird akzeptiert.
stretch (default) Flex-Items werden an der Grundlinie der ersten Zeile angeortnet.

#samp06 {
  	display: flex;
	flex-flow: row wrap;
	align-items: baseline;
	min-height:200px;
	}

#samp066 {
  display: flex;
	flex-flow: row wrap;
	align-items: stretch;
	min-height:200px;
	}

7. align-content

Note: diese Eigenschaft hat keinen Effekt wenn es nur eine Zeile Flex-Items hat. Es werden mehrere Zeilen und extra Freiraum benötigt.
Mit align-content werden die Zwischenräume zwischen den Elementen vertikal ausgerichtet Ähnlich wie justify-content horizontal.

align-content: flex-start | flex-end | center | space-between | space-around | stretch;
flex-start Reihen sind am Startpunkt (links, oben) angeordnet, top > bottom
flex-end Reihen werden unten angeordnet, bottom > top.
center Reihen werden vertikal mittig ausgerichtet.
space-between Erste Reihe oben, letzte Reihe unten, weitere Reihen werden dazwischen angeordnet.
space-around Alle Reihen haben den gleichen Abstand.
stretch (default) Reihen werden vertikal und gleichmässig ausgedehnt.

#samp07 {
  	display: flex;
	flex-flow: row wrap;
	align-content: space-around;
	min-height:400px;
	}

#samp077 {
  display: flex;
	flex-flow: row wrap;
	align-content: stretch;
	min-height:400px;
	}

Einstellungen für Flex Items