Eigenschaft flex-flow

Die Eigenschaft flex-flow ist eine Kurzschreibweise für flex-direction und flex-wrap. Standardwert: row nowrap. Wird auf das übergeordnete Element von Flex-Containern angewendet.

Syntax

Selektor {
	flex-flow: Hauptachsenrichtung Umbruch;
}

Die Reihenfolge der Werte spielt keine Rolle.

Beispiel

In diesem Beispiel passen die Blöcke nicht in ihren Container und werden in mehrere Zeilen umgebrochen:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
</div>

#parent {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	border: 1px solid #696989;
	height: 200px;
	width: 330px;
	margin: auto;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Beispiel

Wir ändern die Richtung der Hauptachse (column anstatt row):

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
</div>

#parent {
	flex-flow: column wrap;
	justify-content: space-between;
	display: flex;
	height: 200px;
	width: 330px;
	margin: auto;
	border: 1px solid #696989;
}
#parent > div {
	width: 100px;
	height: 50px;
	border: 1px solid #696989;
}

Siehe auch

Eigenschaft flex-direction,
die die Richtung der Achsen von Flex-Containern festlegt
Eigenschaft justify-content,
die die Ausrichtung entlang der Hauptachse festlegt
Eigenschaft align-items,
die die Ausrichtung entlang der Querachse festlegt
Eigenschaft flex-wrap,
die den Umbruch von Flex-Containern festlegt
Eigenschaft order,
die die Reihenfolge von Flex-Containern festlegt
Eigenschaft align-self,
die die Ausrichtung eines einzelnen Blocks festlegt
Eigenschaft flex-basis,
die die Größe eines bestimmten Flex-Containers festlegt
Eigenschaft flex-grow,
die das Wachstumsverhalten von Flex-Containern festlegt
Eigenschaft flex-shrink,
die die Schrumpffähigkeit von Flex-Containern festlegt
Eigenschaft flex,
Kurzschreibweise für flex-grow, flex-shrink und flex-basis