align-items
Misol
Moslashuvchan <div> elementining barcha elementlarini markazga tekislang:
div {
display: flex;
align-items: center;
}
O‘zingiz sinab ko‘ring »
Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.
Ta’rif va qo‘llanilishi
align-items xususiyati flexbox yoki grid konteyneri ichidagi elementlar uchun standart tekislashni belgilaydi.
- Flexbox konteynerida flexbox elementlari ko‘ndalang o‘q bo‘ylab tekislanadi, u standart holatda vertikal bo‘ladi (flex-direction ga qarama-qarshi).
- Grid konteynerida grid elementlari blok yo‘nalishida tekislanadi. Ingliz tilidagi sahifalarda blok yo‘nalishi yuqoridan pastga, inline yo‘nalishi esa chapdan o‘ngga bo‘ladi.
Bu xususiyat tekislashga ta’sir qilishi uchun elementlar atrofida tegishli yo‘nalishda bo‘sh joy bo‘lishi kerak.
Maslahat: align-items xususiyatini qayta belgilash uchun har bir elementning align-self xususiyatidan foydalaning.
| Standart qiymat: | normal |
|---|---|
| Meros qilinadi: | yo‘q |
| Animatsiya qilinadi: | yo‘q. animatable haqida o‘qing |
| Versiya: | CSS3 |
| JavaScript sintaksisi: | object.style.alignItems="center" Sinab ko‘ring |
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar xususiyatni to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Xususiyat | |||||
|---|---|---|---|---|---|
| align-items | 57.0 | 16.0 | 52.0 | 10.1 | 44.0 |
CSS sintaksisi
align-items: normal|stretch|joylashuv bo‘yicha tekislash|flex-start|flex-end|baseline|initial|inherit;
Xususiyat qiymatlari
| Qiymat | Tavsif | Sinab ko‘ring |
|---|---|---|
| normal | Standart. Flexbox va grid elementlari uchun 'stretch' kabi, blok o‘lchami belgilangan grid elementlari uchun esa 'start' kabi ishlaydi. | Demo ❯ |
| stretch | Elementlar konteynerga moslashish uchun cho‘ziladi | Demo ❯ |
| center | Elementlar konteynerning markaziga joylashtiriladi | Demo ❯ |
| flex-start | Elementlar konteynerning boshiga joylashtiriladi | Demo ❯ |
| flex-end | Elementlar konteynerning oxiriga joylashtiriladi | Demo ❯ |
| start | Elementlar blok yo‘nalishida o‘z grid kataklarining boshiga joylashtiriladi | |
| end | Elementlar blok yo‘nalishida o‘z grid kataklarining oxiriga joylashtiriladi | |
| baseline | Elementlar konteynerning tayanch chizig‘iga (baseline) joylashtiriladi | 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
Misol
Elementlar konteynerning boshiga joylashtiriladi:
div {
display: flex;
align-items: flex-start;
}
O‘zingiz sinab ko‘ring »
Misol
Elementlar konteynerning oxiriga joylashtiriladi:
div {
display: flex;
align-items: flex-end;
}
O‘zingiz sinab ko‘ring »
Misol
Elementlar konteynerning tayanch chizig‘iga (baseline) joylashtiriladi:
div {
display: flex;
align-items: baseline;
}
O‘zingiz sinab ko‘ring »
Misol
Elementlar konteynerga moslashish uchun cho‘ziladi:
div {
display: flex;
align-items: stretch;
}
O‘zingiz sinab ko‘ring »
Grid bilan misol
Elementlar blok yo‘nalishida har bir grid katagining boshiga tekislanadi:
#container {
display: grid;
align-items: start;
}
O‘zingiz sinab ko‘ring »
Absolyut joylashuv bilan misol
Absolyut joylashtirilgan grid elementlari blok yo‘nalishida har bir grid katagining oxiriga tekislanadi:
#container {
display: grid;
position: relative;
align-items: end;
}
#container > div {
position: absolute;
}
O‘zingiz sinab ko‘ring »
Tegishli sahifalar
CSS darsligi: CSS grid
CSS darsligi: CSS flexbox
CSS ma’lumotnomasi: align-content xususiyati
CSS ma’lumotnomasi: align-self xususiyati
CSS ma’lumotnomasi: justify-content xususiyati
CSS ma’lumotnomasi: justify-items xususiyati
CSS ma’lumotnomasi: justify-self xususiyati
HTML DOM ma’lumotnomasi: alignItems xususiyati
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!