place-items
Misol
Har bir <div> elementini inline va blok yo‘nalishlarida o‘z grid katagining boshiga joylashtiring:
#container {
place-items: start;
}
O‘zingiz sinab ko‘ring »
Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.
Ta’rif va qo‘llanilishi
place-items xususiyati grid maketida ishlatiladi hamda quyidagi xususiyatlar uchun qisqartma xususiyat hisoblanadi:
Agar place-items xususiyati ikkita qiymatga ega bo‘lsa:
- place-items: start center;
- align-items xususiyatining qiymati 'start'
- justify-items xususiyatining qiymati 'center'
Agar place-items xususiyati bitta qiymatga ega bo‘lsa:
- place-items: end;
- align-items va justify-items xususiyatlarining qiymati ikkalasida ham 'end'
| Standart qiymat: | normal legacy |
|---|---|
| Meros qilinadi: | yo‘q |
| Animatsiya qilinadi: | yo‘q. animatable haqida o‘qing |
| Versiya: | CSS3 |
| JavaScript sintaksisi: | object.style.placeItems="stretch center" Sinab ko‘ring |
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar xususiyatni to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Xususiyat | |||||
|---|---|---|---|---|---|
| place-items | 59.0 | 79.0 | 45.0 | 11.0 | 46.0 |
CSS sintaksisi
place-items: normal legacy|value|initial|inherit;
Xususiyat qiymatlari
| Qiymat | Tavsif | Demo |
|---|---|---|
| normal legacy | Standart. Elementning standart place-items qiymati. align-items uchun standart qiymat 'normal', justify-items uchun standart qiymat esa 'legacy'. | Demo ❯ |
| baseline | Elementlar konteynerning tayanch chizig‘iga (baseline) joylashtiriladi | Demo ❯ |
| center | Elementlarni grid katagining markaziga tekislaydi | Demo ❯ |
| end | Elementlarni grid katagining oxiriga tekislaydi | Demo ❯ |
| start | Elementlarni grid katagining boshiga tekislaydi | Demo ❯ |
| stretch | Agar grid elementlarining o‘lchamlari o‘rnatilmagan bo‘lsa, ularni grid konteynerini to‘ldiradigan qilib cho‘zadi. | 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
Writing-mode
Grid konteynerining writing-mode xususiyati qiymati 'vertical-rl' ga o‘rnatilganda, blok yo‘nalishidagi oxir pastdan chapga, inline yo‘nalishidagi oxir esa o‘ngdan pastki tomonga ko‘chadi:
#container {
place-items: end;
writing-mode: vertical-rl;
}
O‘zingiz sinab ko‘ring »
Flexbox
justify-items xususiyati flexbox uchun ahamiyatga ega emas. Shuning uchun place-items xususiyati flexbox maketida ishlatilsa, justify-items uchun berilgan qiymat (ikkinchi qiymat) e’tiborga olinmaydi.
#wrapper {
place-items: stretch end;
}
O‘zingiz sinab ko‘ring »
Tegishli sahifalar
CSS darsligi: CSS grid
CSS darsligi: CSS flexbox
CSS align-items xususiyati: CSS align-items xususiyati
CSS justify-items xususiyati: CSS justify-items xususiyati
CSS writing-mode xususiyati: CSS Writing-mode xususiyati
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!