CSS'te Esnek Kutuların Çapraz Eksende Hizalanması

Şimdi de kutuları çapraz eksende hizalamaya çalışalım. Bu eksendeki hizalama align-items özelliği ile belirlenir. flex-start değeri öğeleri eksenin başına, flex-end değeri ise sonuna dayar.

Hadi örneklerle deneyelim.

Örnek

Ana ekseni soldan sağa yönlendirelim. Bu durumda çapraz eksen yukarıdan aşağıya doğru olacaktır. Şimdi kutularımızın hem ana eksende hem de çapraz eksende konumunu ayarlayalım.

Ana eksende kutuları başına, yani sol kenara dayayalım. Bunun için justify-content değerini flex-start yapalım. Çapraz eksende de kutuları başına, yani üst kenara dayayalım. Bunun için align-items değerini de flex-start yapalım.

Ne elde ettiğimize bakalım:

.parent {
	display: flex;
	flex-direction:  row;        /* ana eksen sağa, çapraz eksen aşağı */
	justify-content: flex-start; /* kutuları ana eksenin başına */
	align-items:     flex-start; /* kutuları çapraz eksenin başına */
}

Kodun çalışma sonucu:

Örnek

Şimdi kutuları çapraz eksenin sonuna, yani alta dayayalım. Bunun için align-items değerini flex-end yapalım:

.parent {
	display: flex;
	flex-direction:  row;        /* ana eksen sağa, çapraz eksen aşağı */
	justify-content: flex-start; /* kutuları ana eksenin başına */
	align-items:     flex-end;   /* kutuları çapraz eksenin sonuna */
}

Kodun çalışma sonucu:

Örnek

Şimdi ana ekseni yukarıdan aşağıya yönlendirelim. Ana eksen dikey olduğu için çapraz eksen sağdan sola doğru olacaktır. Kutuları her iki eksende de başlangıçlarına dayayalım:

.parent {
	display: flex;
	flex-direction:  column;     /* ana eksen aşağı, çapraz eksen sağa */
	justify-content: flex-start; /* kutuları ana eksenin başına */
	align-items:     flex-start; /* kutuları çapraz eksenin başına */
}

Kodun çalışma sonucu:

Örnek

Şimdi çapraz eksende kutuları sonuna dayayalım:

.parent {
	display: flex;
	flex-direction:  column;     /* ana eksen aşağı, çapraz eksen sağa */
	justify-content: flex-start; /* kutuları ana eksenin başına */
	align-items:     flex-end;   /* kutuları çapraz eksenin sonuna */
}

Kodun çalışma sonucu:

Örnek

Kutuları her iki eksenin de sonuna dayayalım:

.parent {
	display: flex;
	flex-direction:  column;   /* ana eksen aşağı, çapraz eksen sağa */
	justify-content: flex-end; /* kutuları ana eksenin sonuna */
	align-items:     flex-end; /* kutuları çapraz eksenin sonuna */
}

Kodun çalışma sonucu:

Örnek

Ana eksenin yönünü değiştirelim - onu aşağıdan yukarıya yönlendirelim. Bu durumda çapraz eksen yönünü değiştirmeyecek, çünkü ana eksen yine dikey.

Kutuları her iki eksenin de başına dayayalım:

.parent {
	display: flex;
	flex-direction:  column-reverse; /* ana eksen yukarı, çapraz eksen sağa */
	justify-content: flex-start;     /* kutuları ana eksenin başına */
	align-items:     flex-start;     /* kutuları çapraz eksenin başına */
}

Kodun çalışma sonucu:

Pratik Görevler

Sayfayı aşağıdaki örneğe göre tekrarlayın: