justify-items
Misol
Har bir grid elementini o‘z grid katagining oxiriga inline yo‘nalishida tekislang:
#container {
display: grid;
justify-items: end;
}
O‘zingiz sinab ko‘ring »
Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.
Ta’rif va qo‘llanilishi
justify-items xususiyati grid konteynerga o‘rnatiladi va bola elementlarga (grid elementlariga) inline yo‘nalishida tekislanish beradi.
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 elementlari atrofida inline yo‘nalishida bo‘sh joy bo‘lishi kerak.
Maslahat: Grid elementlarini inline yo‘nalishi o‘rniga blok yo‘nalishida tekislash uchun align-items xususiyatidan foydalaning.
| Standart qiymat: | legacy |
|---|---|
| Meros qilinadi: | yo‘q |
| Animatsiya qilinadi: | yo‘q. animatable haqida o‘qing |
| Versiya: | CSS3 |
| JavaScript sintaksisi: | object.style.justifyItems="center" Sinab ko‘ring |
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar xususiyatni to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Xususiyat | |||||
|---|---|---|---|---|---|
| justify-items | 57.0 | 16.0 | 45.0 | 10.1 | 44.0 |
CSS sintaksisi
justify-items: legacy|normal|stretch|joylashuv bo‘yicha tekislash|overflow-alignment|tayanch chiziq bo‘yicha tekislash|initial|inherit;
Xususiyat qiymatlari
| Qiymat | Tavsif | Sinab ko‘ring |
|---|---|---|
| legacy | Standart qiymat. justify-self qiymati 'auto' bo‘lgan grid elementlari grid konteynerning justify-items xususiyati qiymatini faqat u 'legacy' bilan boshlangandagina meros qilib oladi. Bu qiymat HTML’dagi 〈center〉 elementi va align atributining eski (legacy) tekislash xatti-harakatini amalga oshirish uchun mavjud. | Demo ❯ |
| normal | Maket kontekstiga bog‘liq, lekin grid maketi uchun 'stretch' ga o‘xshaydi | 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-items va justify-self
Tekislash konteynerda 'center' ga, grid elementining o‘zida esa '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-items
Absolyut joylashtirilgan grid elementlarida tekislash 'right' ga o‘rnatilgan:
#container {
display: grid;
position: relative;
justify-items: right;
}
.blue {
position: absolute;
}
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 {
justify-items: end;
writing-mode: vertical-rl;
}
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 {
justify-items: start;
direction: rtl;
}
O‘zingiz sinab ko‘ring »
Tegishli sahifalar
CSS darsligi: CSS grid
CSS darsligi: CSS joylashtirish
CSS ma’lumotnomasi: align-items xususiyati
CSS ma’lumotnomasi: direction xususiyati
CSS ma’lumotnomasi: grid xususiyati
CSS ma’lumotnomasi: grid-template-columns xususiyati
CSS ma’lumotnomasi: justify-self xususiyati
CSS ma’lumotnomasi: position xususiyati
CSS ma’lumotnomasi: writing-mode xususiyati
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!