justify-self
Misol
Grid elementini o‘z grid katagining o‘ng tomoniga tekislang:
.red {
display: grid;
justify-self: right;
}
O‘zingiz sinab ko‘ring »
Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.
Ta’rif va qo‘llanilishi
justify-self xususiyati grid elementini o‘z grid katagi ichida inline yo‘nalishida tekislaydi.
Ingliz tilidagi sahifalarda inline yo‘nalishi chapdan o‘ngga, blok yo‘nalishi esa yuqoridan pastga bo‘ladi.
Bu xususiyat tekislashga ta’sir qilishi uchun grid elementi atrofida inline yo‘nalishida bo‘sh joy bo‘lishi kerak.
Maslahat: Grid elementini inline yo‘nalishi o‘rniga blok yo‘nalishida tekislash uchun align-self yoki align-items xususiyatlaridan foydalaning.
| Standart qiymat: | auto |
|---|---|
| Meros qilinadi: | yo‘q |
| Animatsiya qilinadi: | yo‘q. animatable haqida o‘qing |
| Versiya: | CSS3 |
| JavaScript sintaksisi: | object.style.justifySelf="right" Sinab ko‘ring |
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar xususiyatni to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Xususiyat | |||||
|---|---|---|---|---|---|
| justify-self | 57.0 | 16.0 | 45.0 | 10.1 | 44.0 |
CSS sintaksisi
justify-self: auto|normal|stretch|joylashuv bo‘yicha tekislash|overflow-alignment|tayanch chiziq bo‘yicha tekislash|initial|inherit;
Xususiyat qiymatlari
| Qiymat | Tavsif | Sinab ko‘ring |
|---|---|---|
| auto | Standart qiymat. Grid konteynerning justify-self xususiyati qiymati meros qilib olinadi. | Demo ❯ |
| normal | Maket kontekstiga bog‘liq, lekin o‘lchami o‘rnatilmagan grid elementlari uchun grid maketida 'stretch' ga o‘xshaydi. Agar o‘lcham o‘rnatilgan bo‘lsa, xususiyat qiymati 'start' kabi ishlaydi. | Demo ❯ |
| stretch | Agar inline-size (kenglik) o‘rnatilmagan bo‘lsa, grid katagini to‘ldirish uchun cho‘ziladi. | Demo ❯ |
| start | Elementlarni inline yo‘nalishida boshiga tekislaydi | Demo ❯ |
| left | Elementlarni chapga tekislaydi | Demo ❯ |
| center | Elementlarni markazga tekislaydi | Demo ❯ |
| end | Elementlarni inline yo‘nalishida oxiriga tekislaydi | Demo ❯ |
| right | Elementlarni o‘ngga tekislaydi | Demo ❯ |
| overflow-alignment |
|
|
| tayanch chiziq bo‘yicha tekislash | Element ota elementning tayanch chizig‘i (baseline) bo‘yicha tekislanadi. | Demo ❯ |
| initial | Bu xususiyatni standart qiymatiga o‘rnatadi. initial haqida o‘qing | |
| inherit | Bu xususiyatni ota elementidan meros qilib oladi. inherit haqida o‘qing |
Ko‘proq misollar
justify-self va justify-items
Tekislash konteynerda justify-items xususiyati orqali 'center' ga, grid elementining o‘zida esa justify-self xususiyati orqali 'right' ga o‘rnatilgan. 'right' xususiyat qiymati ustun keladi:
#container {
display: grid;
justify-items: center;
}
.blue {
justify-self: right;
}
O‘zingiz sinab ko‘ring »
Absolyut joylashtirilgan grid elementlarida justify-self
Absolyut joylashtirilgan grid elementlarida tekislash 'right' ga o‘rnatilgan:
#container {
display: grid;
position: relative;
}
.red {
position: absolute;
justify-self: right;
}
O‘zingiz sinab ko‘ring »
writing-mode
Grid konteyner elementining writing-mode xususiyati qiymati vertical-rl bo‘lganda inline yo‘nalishi pastga qarab bo‘ladi. Natijada konteynerning boshi chap tomondan yuqoriga, oxiri esa o‘ng tomondan pastga ko‘chadi:
#container {
display: grid;
writing-mode: vertical-rl;
}
.blue {
justify-self: end;
}
O‘zingiz sinab ko‘ring »
direction
Grid konteyner elementining direction xususiyati qiymati 'rtl' bo‘lganda inline yo‘nalishi o‘ngdan chapga bo‘ladi. Natijada konteynerning boshi chap tomondan o‘ng tomonga, oxiri esa o‘ng tomondan chap tomonga ko‘chadi:
#container {
display: grid;
direction: rtl;
}
.blue {
justify-self: end;
}
O‘zingiz sinab ko‘ring »
Tegishli sahifalar
CSS darsligi: CSS grid
CSS darsligi: CSS joylashtirish
CSS ma’lumotnomasi: align-content xususiyati
CSS ma’lumotnomasi: align-items xususiyati
CSS ma’lumotnomasi: align-self xususiyati
CSS ma’lumotnomasi: direction xususiyati
CSS ma’lumotnomasi: grid xususiyati
CSS ma’lumotnomasi: grid-template-columns xususiyati
CSS ma’lumotnomasi: position xususiyati
CSS ma’lumotnomasi: writing-mode xususiyati
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!