Urutan Blok Flex dalam CSS

Misalkan kita memiliki blok-blok berikut, yang disusun dalam satu baris:

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

Mari kita ubah urutan tampilannya di layar, tanpa mengubah urutannya dalam kode HTML.

Untuk ini ada properti order, yang mengatur urutan elemen tertentu menurut aturan berikut: elemen dengan nilai yang lebih besar akan berada lebih dekat ke ujung sumbu, sedangkan elemen dengan nilai yang lebih kecil - akan berada lebih dekat ke awal.

Nilai properti dapat menerima angka positif atau negatif. Secara default, semua elemen mengikuti satu sama lain, ini berarti bahwa order mereka adalah nol.

Mari kita ubah urutan elemen kita. Untuk melakukan ini, atur kelas tambahan elem untuk elemen kedua dan untuk kelas ini atur properti order ke nilai 1:

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

Karena semua elemen secara default akan memiliki urutan 0, dan elemen kedua kita akan memiliki urutan lebih besar dari yang lain, maka elemen itu akan ditempatkan setelah mereka:

Sekarang mari kita berikan nilai negatif -1:

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

Dalam hal ini, blok kita akan pindah ke awal sumbu:

Cobalah sendiri cara kerja properti ini untuk berbagai arah sumbu.