Eigenschaft flex-direction

Die Eigenschaft flex-direction legt die Richtung der Haupt- und Querachse fest oder, mit anderen Worten, ordnet die Elemente in einer Reihe oder Spalte an.

Wird auf das übergeordnete Element für Flex-Container angewendet. Ist Teil der Kurzschreibweise flex-flow.

Syntax

Selektor {
	flex-direction: row | row-reverse | column | column-reverse;
}

Werte

Wert	Beschreibung
`row`	Die Hauptachse verläuft von links nach rechts. Elemente sind in einer Reihe angeordnet, standardmäßig am linken Rand ausgerichtet, ihre Nummerierung hat die normale Reihenfolge - von links nach rechts.
`row-reverse`	Die Hauptachse verläuft von rechts nach links. Elemente sind in einer Reihe angeordnet, standardmäßig am rechten Rand ausgerichtet, ihre Nummerierung hat die umgekehrte Reihenfolge - von rechts nach links.
`column`	Die Hauptachse verläuft von oben nach unten. Elemente sind in einer Spalte angeordnet, standardmäßig am oberen Rand ausgerichtet, ihre Nummerierung hat die normale Reihenfolge - von oben nach unten.
`column-reverse`	Die Hauptachse verläuft von unten nach oben. Elemente sind in einer Spalte angeordnet, standardmäßig am unteren Rand ausgerichtet, ihre Nummerierung hat die umgekehrte Reihenfolge - von unten nach oben.

Standardwert: row.

Beispiel

Elemente sind in einer Reihe angeordnet, standardmäßig am linken Rand ausgerichtet, ihre Nummerierung hat die normale Reihenfolge - von links nach rechts:

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

#parent {
	flex-direction: row;
	display: flex;
}
#parent > div {
	border: 1px solid #696989;
	width: 100px;
	height: 50px;
}

Beispiel . Wert row-reverse

Elemente sind in einer Reihe angeordnet, standardmäßig am rechten Rand ausgerichtet, ihre Nummerierung hat die umgekehrte Reihenfolge - von rechts nach links:

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

#parent {
	flex-direction: row-reverse;
	display: flex;
}
#parent > div {
	border: 1px solid #696989;
	width: 100px;
	height: 50px;
}

Beispiel . Wert column

Elemente sind in einer Spalte angeordnet, standardmäßig am oberen Rand ausgerichtet, ihre Nummerierung hat die normale Reihenfolge - von oben nach unten:

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

#parent {
	flex-direction: column;
	display: flex;
}
#parent > div {
	border: 1px solid #696989;
	width: 100px;
	height: 50px;
}

Beispiel . Wert column-reverse

Elemente sind in einer Spalte angeordnet, standardmäßig am unteren Rand ausgerichtet, ihre Nummerierung hat die umgekehrte Reihenfolge - von unten nach oben:

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

#parent {
	flex-direction: column-reverse;
	display: flex;
}
#parent > div {
	border: 1px solid #696989;
	width: 100px;
	height: 50px;
}

Siehe auch

die Eigenschaft justify-content,
die die Ausrichtung entlang der Hauptachse definiert
die Eigenschaft align-items,
die die Ausrichtung entlang der Querachse definiert
die Eigenschaft flex-wrap,
die den Zeilenumbruch von Flex-Containern definiert
die Eigenschaft flex-flow,
Kurzschreibweise für flex-direction und flex-wrap
die Eigenschaft order,
die die Reihenfolge der Flex-Elemente definiert
die Eigenschaft align-self,
die die Ausrichtung eines einzelnen Elements definiert
die Eigenschaft flex-basis,
die die Größe eines bestimmten Flex-Elements definiert
die Eigenschaft flex-grow,
die die "Dehnbarkeit" von Flex-Elementen definiert
die Eigenschaft flex-shrink,
die die "Schrumpfbarkeit" von Flex-Elementen definiert
die Eigenschaft flex,
Kurzschreibweise für flex-grow, flex-shrink und flex-basis