justify-content
Misol
Flex elementlarni konteyner markaziga tekislang:
div {
display: flex;
justify-content: center;
}
O‘zingiz sinab ko‘ring »
Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.
Ta’rif va qo‘llanilishi
justify-content xususiyati flex konteyner elementlari asosiy o‘q (main-axis) bo‘ylab (gorizontal) mavjud bo‘sh joyning hammasini egallamaganda ularni tekislaydi.
Maslahat: Elementlarni vertikal tekislash uchun align-items xususiyatidan foydalaning.
Eslatma: justify-content xususiyatidan grid elementlarini inline yo‘nalishida tekislash uchun grid konteynerda ham foydalanish mumkin. Ingliz tilidagi sahifalarda inline yo‘nalishi chapdan o‘ngga, blok yo‘nalishi esa yuqoridan pastga bo‘ladi.
| Standart qiymat: | flex-start |
|---|---|
| Meros qilinadi: | yo‘q |
| Animatsiya qilinadi: | yo‘q. animatable haqida o‘qing |
| Versiya: | CSS3 |
| JavaScript sintaksisi: | object.style.justifyContent="space-between" Sinab ko‘ring |
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar xususiyatni to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Xususiyat | |||||
|---|---|---|---|---|---|
| justify-content | 29 | 11 | 28 | 9 | 17 |
CSS sintaksisi
justify-content: flex-start|flex-end|center|space-between|space-around|space-evenly|initial|inherit;
Xususiyat qiymatlari
| Qiymat | Tavsif | Sinab ko‘ring |
|---|---|---|
| flex-start | Standart qiymat. Elementlar konteynerning boshida joylashadi | Demo ❯ |
| flex-end | Elementlar konteynerning oxiriga joylashtiriladi | Demo ❯ |
| center | Elementlar konteynerning markazida joylashadi | Demo ❯ |
| space-between | Elementlar orasida bo‘sh joy bo‘ladi | Demo ❯ |
| space-around | Elementlardan oldin, ular orasida va ulardan keyin bo‘sh joy bo‘ladi | Demo ❯ |
| space-evenly | Elementlar atrofida teng bo‘sh joy bo‘ladi | 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
Flex elementlarni konteyner boshiga tekislang (bu standart holat):
div {
display: flex;
justify-content: flex-start;
}
O‘zingiz sinab ko‘ring »
Misol
Flex elementlarni konteyner oxiriga tekislang:
div {
display: flex;
justify-content: flex-end;
}
O‘zingiz sinab ko‘ring »
Misol
Flex elementlarni ular orasida bo‘sh joy qoldirib ko‘rsating:
div {
display: flex;
justify-content: space-between;
}
O‘zingiz sinab ko‘ring »
Misol
Flex elementlarni ulardan oldin, ular orasida va ulardan keyin bo‘sh joy qoldirib ko‘rsating:
div {
display: flex;
justify-content: space-around;
}
O‘zingiz sinab ko‘ring »
Grid bilan misol
Grid elementlarini oxiriga tekislab ko‘rsating:
#container {
display: grid;
justify-content: end;
}
O‘zingiz sinab ko‘ring »
Tegishli sahifalar
CSS darsligi: CSS flexbox
CSS darsligi: CSS grid
CSS ma’lumotnomasi: align-content xususiyati
CSS ma’lumotnomasi: align-items xususiyati
CSS ma’lumotnomasi: align-self xususiyati
HTML DOM ma’lumotnomasi: justifyContent xususiyati
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!