Susunan Blok Flex dalam CSS

Katakan kita mempunyai blok-blok berikut, disusun secara berturut:

<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 tukar susunan paparan mereka pada skrin, tanpa mengubah susunan mereka dalam kod HTML.

Untuk ini, terdapat sifat order, yang menentukan susunan elemen tertentu mengikut peraturan berikut: elemen dengan nilai yang lebih besar berdiri lebih dekat kepada hujung paksi, manakala elemen dengan nilai yang lebih kecil - berdiri lebih dekat kepada permulaan.

Nilai sifat boleh menerima nombor positif atau negatif. Secara lalai, semua elemen mengikut satu sama lain, ini bermakna order mereka adalah sifar.

Mari kita tukar susunan elemen kita. Untuk ini, tetapkan kelas tambahan "elem" untuk elemen kedua dan untuk kelas ini tetapkan sifat order kepada nilai 1:

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

Oleh kerana semua elemen secara lalai akan mempunyai susunan 0, dan elemen kedua kita akan mempunyai susunan lebih besar daripada yang lain, maka ia akan terletak selepas mereka:

Sekarang mari kita tetapkan nilai negatif -1:

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

Dalam kes ini, blok kami akan bergerak ke permulaan paksi:

Cuba sendiri kerja sifat ini untuk pelbagai arah paksi.