CSS'te Flex Blokların Sırası

Aşağıdaki gibi, bir satır halinde dizilmiş bloklarımız olsun:

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

Şimdi bu blokların HTML kodundaki sırasını değiştirmeden, ekrandaki görüntülenme sıralarını değiştirelim.

Bunun için order özelliği kullanılır. Bu özellik, belirli elemanların sırasını şu kurala göre belirler: değeri daha büyük olan eleman eksenin sonuna daha yakın durur, değeri daha küçük olan ise başına daha yakın durur.

Özellik değeri olarak pozitif veya negatif bir sayı alabilir. Varsayılan olarak tüm elemanlar sıfır order değerine sahiptir, bu da onların birbirini takip ettiği anlamına gelir.

Şimdi elemanlarımızın sırasını değiştirelim. Bunun için ikinci elemana elem adında ek bir sınıf ekleyelim ve bu sınıf için order özelliğini 1 olarak ayarlayalım:

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

Tüm elemanlar varsayılan olarak 0 sırasına sahip olacak, ancak ikinci elemanımızın sırası diğerlerinden daha büyük olacağı için, onların ardından yerleştirilecektir:

Şimdi negatif bir değer olan -1 değerini atayalım:

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

Bu durumda bloğumuz eksenin başına doğru taşınacaktır:

Bu özelliğin farklı eksen yönleri için çalışmasını kendiniz deneyin.