CSSda Fleks Bloklarni Ko'ndalang O'q Bo'yicha Joylashtirish

Keling, endi bloklarni ko'ndalang o'q bo'yicha ham joylashtiramiz. Ushbu o'q bo'yicha joylashtirish align-items xususiyati bilan belgilanadi. flex-start qiymati elementlarni o'q boshiga, flex-end qiymati esa o'q oxiriga joylashtiradi.

Keling, misollar orqali ko'rib chiqaylik.

Misol

Asosiy o'qni chapdan o'ngga yo'naltiramiz. Bunday holda ko'ndalang o'q yuqoridan pastga yo'naladi. Keling, bloklarning joylashuvini ham asosiy, ham ko'ndalang o'q bo'yicha sozlashni amalga oshiramiz.

Asosiy o'q bo'yicha bloklarni uning boshiga, ya'ni chap chetga joylashtiramiz. Buning uchun justify-content ni flex-start qiymatiga o'rnatamiz. Ko'ndalang o'q bo'yicha ham bloklarni uning boshiga, ya'ni yuqori chetga joylashtiramiz. Buning uchun align-items ni ham flex-start qiymatiga o'rnatamiz.

Natijani ko'rib chiqamiz:

.parent {
	display: flex;
	flex-direction:  row;        /* asosiy o'q o'ngga, ko'ndalang o'q pastga */
	justify-content: flex-start; /* bloklarni asosiy o'q boshiga */
	align-items:     flex-start; /* bloklarni ko'ndalang o'q boshiga */
}

Kodni bajarish natijasi:

Misol

Keling, endi bloklarni ko'ndalang o'q oxiriga, ya'ni pastki chetga joylashtiramiz. Buning uchun align-items ni flex-end qiymatiga o'rnatamiz:

.parent {
	display: flex;
	flex-direction:  row;        /* asosiy o'q o'ngga, ko'ndalang o'q pastga */
	justify-content: flex-start; /* bloklarni asosiy o'q boshiga */
	align-items:     flex-end;   /* bloklarni ko'ndalang o'q oxiriga */
}

Kodni bajarish natijasi:

Misol

Endi asosiy o'qni yuqoridan pastga yo'naltiramiz. Asosiy o'q vertikal bo'lgani uchun, ko'ndalang o'q o'ngdan chapga yo'naladi. Keling, bloklarni ikkala o'q bo'yicha ham ularning boshiga joylashtiramiz:

.parent {
	display: flex;
	flex-direction:  column;     /* asosiy o'q pastga, ko'ndalang o'q o'ngga */
	justify-content: flex-start; /* bloklarni asosiy o'q boshiga */
	align-items:     flex-start; /* bloklarni ko'ndalang o'q boshiga */
}

Kodni bajarish natijasi:

Misol

Endi ko'ndalang o'q bo'yicha bloklarni uning oxiriga joylashtiramiz:

.parent {
	display: flex;
	flex-direction:  column;     /* asosiy o'q pastga, ko'ndalang o'q o'ngga */
	justify-content: flex-start; /* bloklarni asosiy o'q boshiga */
	align-items:     flex-end;   /* bloklarni ko'ndalang o'q oxiriga */
}

Kodni bajarish natijasi:

Misol

Bloklarni ikkala o'q oxiriga joylashtiramiz:

.parent {
	display: flex;
	flex-direction:  column;   /* asosiy o'q pastga, ko'ndalang o'q o'ngga */
	justify-content: flex-end; /* bloklarni asosiy o'q oxiriga */
	align-items:     flex-end; /* bloklarni ko'ndalang o'q oxiriga */
}

Kodni bajarish natijasi:

Misol

Keling, asosiy o'q yo'nalishini o'zgartiramiz - uni pastdan yuqoriga yo'naltiramiz. Bunda ko'ndalang o'q o'z yo'nalishini o'zgartirmaydi, chunki asosiy o'q hanuz vertikal bo'lib qoladi.

Bloklarni ikkala o'q boshiga joylashtiramiz:

.parent {
	display: flex;
	flex-direction:  column-reverse; /* asosiy o'q yuqoriga, ko'ndalang o'q o'ngga */
	justify-content: flex-start;     /* bloklarni asosiy o'q boshiga */
	align-items:     flex-start;     /* bloklarni ko'ndalang o'q boshiga */
}

Kodni bajarish natijasi:

Amaliy Mashqlar

Quyidagi namunaga asosan sahifani takrorlang: