Eigenschaft flex-wrap

Die Eigenschaft flex-wrap legt die mehrzeilige Anordnung von Blöcken entlang der Hauptachse fest. Wird auf das übergeordnete Element für Flex-Blöcke angewendet. Ist Teil der Kurzschreibweise flex-flow.

Syntax

Selektor {
	flex-wrap: nowrap | wrap | wrap-reverse;
}

Werte

Wert	Beschreibung
`nowrap`	Einzeiliger Modus - die Blöcke werden in einer Zeile angeordnet.
`wrap`	Blöcke werden in mehrere Zeilen angeordnet, wenn sie nicht in eine passen.
`wrap-reverse`	Dasselbe wie `wrap`, aber die Blöcke werden in umgekehrter Reihenfolge angeordnet (zuerst der letzte, dann der erste).

Standardwert: nowrap.

Beispiel . Wert wrap

Jetzt passen die Blöcke nicht in ihren Container und werden in mehreren Zeilen angeordnet:

<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-wrap: wrap;
	flex-direction: row;
	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 . Wert wrap-reverse

Und jetzt ändert sich die Reihenfolge in die umgekehrte (achten Sie auf die Zahlen in den Blöcken):

<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-wrap: wrap-reverse;
	flex-direction: row;
	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 . Wert nowrap

Jetzt werden die Blöcke im einzeiligen Modus angeordnet (so ist die Voreinstellung). Dabei wird der Wert der Breite width für die Blöcke ignoriert, wenn er verhindert, dass die Blöcke in das Elternelement passen. Achten Sie darauf, dass die Blöcke zwar in das Elternelement passen, ihre tatsächliche Breite aber nicht 100px entspricht, wie vorgegeben, sondern geringer ist:

<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-wrap: nowrap;
	flex-direction: row;
	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 . Wert nowrap

Wenn die Blöcke jedoch bei der vorgegebenen Breite Platz finden, wird die Eigenschaft width nicht ignoriert. Verringern wir die Anzahl der Blöcke, damit sie alle Platz finden:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
</div>

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

Siehe auch

die Eigenschaft flex-direction,
die die Richtung der Achsen der Flex-Blöcke festlegt
die Eigenschaft justify-content,
die die Ausrichtung entlang der Hauptachse festlegt
die Eigenschaft align-items,
die die Ausrichtung entlang der Querachse festlegt
die Eigenschaft flex-flow,
Kurzschreibweise für flex-direction und flex-wrap
die Eigenschaft order,
die die Reihenfolge der Flex-Blöcke festlegt
die Eigenschaft align-self,
die die Ausrichtung eines einzelnen Blocks festlegt
die Eigenschaft flex-basis,
die die Größe eines bestimmten Flex-Blocks festlegt
die Eigenschaft flex-grow,
die die "Gierigkeit" der Flex-Blöcke festlegt
die Eigenschaft flex-shrink,
die die Schrumpfbarkeit der Flex-Blöcke festlegt
die Eigenschaft flex,
Kurzschreibweise für flex-grow, flex-shrink und flex-basis