Order of flex boxes in CSS

Let us have the following blocks arranged in a row:

<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;
}

Let's change the order in which they appear on the screen without changing their order in the HTML code.

For this purpose, there is a property order, which sets the order of specific elements according to the following rule: those with a higher value are closer to the end of the axis, and those with a lower value are closer to the beginning.

The property value can be a positive or negative number. By default, all elements follow each other, which means that order is zero.

Let's change the order of our elements. To do this, we'll set the second element to an additional class called elem and set the order property to 1 for this class:

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

Since all elements will have order 0 by default, and our second element will have an order greater than the others, it will be located after them:

Let's now set the negative value to -1:

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

In this case, our block will move to the beginning of the axis:

Try this property out for different axis directions yourself.