CSS-də kəsişən ox boyunca fleks blokların uzlaşdırılması

Gəlin indi blokları həm də kəsişən ox boyunca uzlaşdıraq. Bu ox boyunca uzlaşdırma align-items xassəsi ilə təyin olunur. flex-start dəyəri elementləri oxun başlanğıcına, flex-end dəyəri isə sonuna doğru yerləşdirir.

Gəlin nümunələr üzərində sınayaq.

Nümunə

Əsas oxu soldan sağa yönləndirək. Bu halda kəsişən ox yuxarıdan aşağıya yönələcək. Gəlin bloklarımızın yerləşməsini həm əsas ox, həm də kəsişən ox boyunca tənzimləyək.

Əsas ox boyunca blokları onun başlanğıcına, yəni sol kənara doğru yerləşdirək. Bunun üçün justify-content xassəsini flex-start dəyərinə təyin edək. Kəsişən ox boyunca da blokları onun başlanğıcına, yəni yuxarı kənara doğru yerləşdirək. Bunun üçün align-items xassəsini də flex-start dəyərinə təyin edək.

Nəticəyə baxaq:

.parent {
	display: flex;
	flex-direction:  row;        /* əsas ox sağa, kəsişən ox aşağı */
	justify-content: flex-start; /* blokları əsas oxun başlanğıcına */
	align-items:     flex-start; /* blokları kəsişən oxun başlanğıcına */
}

Kodun icrasının nəticəsi:

Nümunə

Gəlin indi blokları kəsişən oxun sonuna, yəni aşağıya doğru yerləşdirək. Bunun üçün align-items xassəsini flex-end dəyərinə təyin edək:

.parent {
	display: flex;
	flex-direction:  row;        /* əsas ox sağa, kəsişən ox aşağı */
	justify-content: flex-start; /* blokları əsas oxun başlanğıcına */
	align-items:     flex-end;   /* blokları kəsişən oxun sonuna */
}

Kodun icrasının nəticəsi:

Nümunə

İndi əsas oxu yuxarıdan aşağıya yönləndirək. Əsas ox şaquli olduğu üçün kəsişən ox sağdan sola yönələcək. Gəlin blokları hər iki ox boyunca onların başlanğıcına yerləşdirək:

.parent {
	display: flex;
	flex-direction:  column;     /* əsas ox aşağı, kəsişən ox sağa */
	justify-content: flex-start; /* blokları əsas oxun başlanğıcına */
	align-items:     flex-start; /* blokları kəsişən oxun başlanğıcına */
}

Kodun icrasının nəticəsi:

Nümunə

İndi isə kəsişən ox boyunca blokları onun sonuna yerləşdirək:

.parent {
	display: flex;
	flex-direction:  column;     /* əsas ox aşağı, kəsişən ox sağa */
	justify-content: flex-start; /* blokları əsas oxun başlanğıcına */
	align-items:     flex-end;   /* blokları kəsişən oxun sonuna */
}

Kodun icrasının nəticəsi:

Nümunə

Blokları hər iki oxun sonuna yerləşdirək:

.parent {
	display: flex;
	flex-direction:  column;   /* əsas ox aşağı, kəsişən ox sağa */
	justify-content: flex-end; /* blokları əsas oxun sonuna */
	align-items:     flex-end; /* blokları kəsişən oxun sonuna */
}

Kodun icrasının nəticəsi:

Nümunə

Gəlin əsas oxun istiqamətini dəyişək - onu aşağıdan yuxarıya yönləndirək. Bu halda kəsişən ox öz istiqamətini dəyişməyəcək, çünki əsas ox hələ də şaquli qalır.

Blokları hər iki oxun başlanğıcına yerləşdirək:

.parent {
	display: flex;
	flex-direction:  column-reverse; /* əsas ox yuxarı, kəsişən ox sağa */
	justify-content: flex-start;     /* blokları əsas oxun başlanğıcına */
	align-items:     flex-start;     /* blokları kəsişən oxun başlanğıcına */
}

Kodun icrasının nəticəsi:

Praktiki tapşırıqlar

Səhifəni bu nümunəyə uyğun təkrarlayın: