Grid elementlarini tekislash
CSS Grid elementlari — tekislash
Grid elementlar o‘z grid kataklari ichida quyidagi xossalar bilan tekislanishi mumkin:
justify-self— katak ichida gorizontal tekislashni belgilaydialign-self— katak ichida vertikal tekislashni belgilaydiplace-self—align-selfvajustify-selfuchun qisqartma xossasi
Bular grid konteynerda justify-items va align-items yordamida konteynerdagi barcha grid elementlarga qo‘llanishi ham mumkin.
CSS justify-self xossasi
justify-self xossasi grid elementni o‘z grid katagi ichida inline yo‘nalishda tekislash uchun ishlatiladi.
Maslahat: Ingliz tilidagi sahifalarda inline yo‘nalish chapdan o‘ngga, blok yo‘nalishi yuqoridan pastgadir.
Bu xossa quyidagi qiymatlardan biriga ega bo‘lishi mumkin:
auto(default)normalstretchstartleftcenterendright
Eslatma: Bu xossa tekislash effektiga ega bo‘lishi uchun grid elementning inline yo‘nalishda o‘z atrofida bo‘sh joyi kerak.
Misol
justify-self xossasidan foydalanish:
.item1 {justify-self: right;}
.item6 {justify-self:
center;}
Natija:
CSS align-self xossasi
align-self xossasi grid elementni o‘z grid katagi ichida blok yo‘nalishida tekislash uchun ishlatiladi.
Bu xossa quyidagi qiymatlardan biriga ega bo‘lishi mumkin:
auto(default)normalstretchstartendcenter
Eslatma: Bu xossa tekislash effektiga ega bo‘lishi uchun grid elementning blok yo‘nalishda o‘z atrofida bo‘sh joyi kerak.
Misol
align-self xossasidan foydalanish:
.item1 {align-self: start;}
.item6 {align-self: center;}
Natija:
CSS Grid Item Alignment xossalari
| Xususiyat | Tavsif |
|---|---|
| align-self | To‘r elementini uning katakchasi ichidagi blok yo‘nalishi bo‘yicha tekislang |
| justify-self | To‘r elementini uning katakchalari ichidagi chiziqli yo‘nalishda tekislang |
| place-self | align-self va justify-self uchun qisqartma xususiyat |
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!
