Reihenfolge von Flex-Blöcken in CSS

Nehmen wir an, wir haben die folgenden Blöcke, die in einer Reihe angeordnet sind:

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

.parent {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	width: 300px;
	height: 200px;
	border: 1px solid red;
}
.child {
	width: 50px;
	height: 50px;
	border: 1px solid green;
}

Lassen Sie uns die Reihenfolge ihrer Anzeige auf dem Bildschirm ändern, ohne ihre Reihenfolge im HTML-Code zu ändern.

Dafür gibt es die Eigenschaft order, die die Reihenfolge bestimmter Elemente nach folgender Regel festlegt: Wer einen größeren Wert hat, steht näher am Ende der Achse, und wer einen kleineren hat - steht näher am Anfang.

Als Wert kann die Eigenschaft eine positive oder negative Zahl annehmen. Standardmäßig folgen alle Elemente aufeinander, das bedeutet, dass order bei ihnen null ist.

Lassen Sie uns die Reihenfolge unserer Elemente ändern. Weisen wir dazu dem zweiten Element die zusätzliche Klasse elem zu und setzen wir für diese Klasse die Eigenschaft order auf den Wert 1:

.elem {
	order: 1;
	border: 1px solid red;
}

Da alle Elemente standardmäßig die Reihenfolge 0 haben, unser zweites Element aber eine höhere Reihenfolge als die anderen haben wird, wird es nach diesen angeordnet:

Lassen Sie uns nun einen negativen Wert -1 setzen:

.elem {
	order: -1;
	border: 1px solid red;
}

In diesem Fall wird sich unser Block an den Anfang der Achse bewegen:

Probieren Sie die Funktionsweise dieser Eigenschaft selbstständig für verschiedene Achsrichtungen aus.