Thứ tự của các khối flex trong CSS

Giả sử chúng ta có các khối sau, được sắp xếp thành một hàng:

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

Hãy thay đổi thứ tự hiển thị của chúng trên màn hình mà không thay đổi thứ tự của chúng trong mã HTML.

Để làm điều này, có thuộc tính order, thiết lập thứ tự sắp xếp của các phần tử cụ thể theo quy tắc sau: phần tử nào có giá trị lớn hơn sẽ nằm gần cuối trục hơn, và phần tử nào có giá trị nhỏ hơn - sẽ nằm gần đầu trục hơn.

Giá trị của thuộc tính có thể là số dương hoặc số âm. Theo mặc định, tất cả các phần tử đều theo sau nhau, điều này có nghĩa là order của chúng bằng không.

Hãy thay đổi thứ tự các phần tử của chúng ta. Để làm điều này, hãy đặt cho phần tử thứ hai một lớp bổ sung là elem và cho lớp này thiết lập thuộc tính order với giá trị 1:

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

Vì tất cả các phần tử theo mặc định sẽ có thứ tự 0, còn phần tử thứ hai của chúng ta sẽ có thứ tự lớn hơn các phần tử còn lại, nên nó sẽ được đặt sau chúng:

Bây giờ hãy đặt giá trị âm -1:

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

Trong trường hợp này, khối của chúng ta sẽ di chuyển về đầu trục:

Tự mình thử nghiệm hoạt động của thuộc tính này cho các hướng trục khác nhau.