CSS da Fleks Elementlarni Asosiy O‘q Bo‘yicha Joylashtirish

justify-content xususiyati elementlarni asosiy o‘q bo‘yicha joylashtirish imkonini beradi. Oldin siz center, space-between, space-around, space-evenly qiymatlarini o‘rgansiz. Keling, endi yana bir nechta qiymatlarni o‘rganamiz.

flex-start qiymati elementlarni asosiy o‘qning boshiga, flex-end qiymati esa oxiriga joylashtiradi. Keling, misollar orqali ko‘rib chiqaylik.

Misol

Asosiy o‘qni chapdan o‘ngga yo‘naltiramiz, buning uchun flex-direction xususiyatiga row qiymatini beramiz. Bloklarni o‘q boshiga joylashtiramiz. Buning uchun justify-content ga flex-start qiymatini o‘rnatamiz:

.parent {
	display: flex;
	flex-direction: row; /* asosiy o‘q chapdan o‘ngga */
	justify-content: flex-start; /* bloklarni asosiy o‘q boshiga */
}

Kodni bajarish natijasi:

Misol

Keling, endi bloklarni o‘q oxiriga joylashtiramiz. Buning uchun justify-content ga flex-end qiymatini o‘rnatamiz:

.parent {
	display: flex;
	flex-direction: row; /* asosiy o‘q chapdan o‘ngga */
	justify-content: flex-end; /* bloklarni asosiy o‘q oxiriga */
}

Kodni bajarish natijasi:

Misol

Endi asosiy o‘qni o‘ngdan chapga yo‘naltiramiz, buning uchun flex-direction xususiyatiga row-reverse qiymatini beramiz. Bloklarni o‘q boshiga, ya'ni o‘ng chetga joylashtiramiz. Buning uchun justify-content ga flex-start qiymatini o‘rnatamiz:

.parent {
	display: flex;
	flex-direction: row-reverse; /* asosiy o‘q o‘ngdan chapga */
	justify-content: flex-start; /* bloklarni asosiy o‘q boshiga */
}

Kodni bajarish natijasi:

Misol

Endi bloklarni asosiy o‘q oxiriga, ya'ni chap chetga joylashtiramiz. Buning uchun justify-content ga flex-end qiymatini o‘rnatamiz:

.parent {
	display: flex;
	flex-direction: row-reverse; /* asosiy o‘q o‘ngdan chapga */
	justify-content: flex-end; /* bloklarni asosiy o‘q oxiriga */
}

Kodni bajarish natijasi:

Misol

Oldingi misollarda asosiy o‘q gorizontal yo‘nalgan edi. Keling, endi uni aylantiramiz va vertikal yo‘naltiramiz.

Asosiy o‘qni pastga yo‘naltiramiz, buning uchun flex-direction xususiyatiga column qiymatini beramiz.

Bloklarni asosiy o‘q boshiga, ya'ni yuqori chetga joylashtiramiz. Buning uchun justify-content ga flex-start qiymatini o‘rnatamiz:

.parent {
	display: flex;
	flex-direction: column; /* asosiy o‘q yuqoridan pastga */
	justify-content: flex-start; /* bloklarni asosiy o‘q boshiga */
}

Kodni bajarish natijasi:

Misol

Keling, endi bloklarni asosiy o‘q oxiriga, ya'ni pastki chetga joylashtiramiz. Buning uchun justify-content ga flex-end qiymatini o‘rnatamiz:

.parent {
	display: flex;
	flex-direction: column; /* asosiy o‘q yuqoridan pastga */
	justify-content: flex-end; /* bloklarni asosiy o‘q oxiriga */
}

Kodni bajarish natijasi:

Misol

Asosiy o‘qni aylantiramiz, uni pastdan yuqoriga yo‘naltiramiz. Buning uchun flex-direction xususiyatiga column-reverse qiymatini beramiz. Bu holda bloklar o‘z tartibini o‘zgartiradi - o‘q boshida HTML kodidagi oxirgi blok turadi.

Keling, bloklarni asosiy o‘q boshiga, ya'ni pastki chetga joylashtiramiz. Buning uchun justify-content ga flex-start qiymatini o‘rnatamiz:

.parent {
	display: flex;
	flex-direction: column-reverse; /* asosiy o‘q pastdan yuqoriga */
	justify-content: flex-start; /* bloklarni asosiy o‘q boshiga */
}

Kodni bajarish natijasi:

Misol

Keling, bloklarni asosiy o‘q oxiriga, ya'ni yuqori chetga joylashtiramiz. Buning uchun justify-content ga flex-end qiymatini o‘rnatamiz:

.parent {
	display: flex;
	flex-direction: column-reverse; /* asosiy o‘q pastdan yuqoriga */
	justify-content: flex-end; /* bloklarni asosiy o‘q oxiriga */
}

Kodni bajarish natijasi:

Amaliy Mashqlar

Ushbu namunaga asosan sahifani takrorlang: