align-content
Misol
Qatorlarni flex konteynerning markaziga tomon joylashtiring:
div {
width: 70px;
height: 300px;
border: 1px solid #c3c3c3;
display: flex;
flex-wrap: wrap;
align-content: center;
}
O‘zingiz sinab ko‘ring »
Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.
Ta’rif va qo‘llanilishi
align-content xususiyati flexbox konteynerida flex qatorlarining ko‘ndalang o‘q bo‘ylab qanday taqsimlanishini belgilaydi.
Flexbox maketida asosiy o‘q flex-direction bo‘yicha yo‘naladi (standart qiymati 'row', gorizontal), ko‘ndalang o‘q esa asosiy o‘qqa perpendikulyar bo‘ladi (standart qiymati 'column', vertikal).
Maslahat: Elementlarni asosiy o‘q bo‘ylab (gorizontal) tekislash uchun justify-content xususiyatidan foydalaning.
Eslatma: align-content xususiyatidan grid elementlarini blok yo‘nalishida tekislash uchun grid konteynerida ham foydalanish mumkin. Ingliz tilidagi sahifalarda blok yo‘nalishi yuqoridan pastga, inline yo‘nalishi esa chapdan o‘ngga bo‘ladi.
| Standart qiymat: | stretch |
|---|---|
| Meros qilinadi: | yo‘q |
| Animatsiya qilinadi: | yo‘q. animatable haqida o‘qing |
| Versiya: | CSS3 |
| JavaScript sintaksisi: | object.style.alignContent="center" Sinab ko‘ring |
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar xususiyatni to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Xususiyat | |||||
|---|---|---|---|---|---|
| align-content | 57.0 | 16.0 | 52.0 | 10.1 | 44.0 |
CSS sintaksisi
align-content: stretch|center|flex-start|flex-end|space-between|space-around|space-evenly|initial|inherit;
Xususiyat qiymatlari
| Qiymat | Tavsif | Demo |
|---|---|---|
| stretch | Standart qiymat. Qatorlar qolgan bo‘sh joyni egallash uchun cho‘ziladi | Demo ❯ |
| center | Qatorlar flex konteynerning markaziga tomon joylashtiriladi | Demo ❯ |
| flex-start | Qatorlar flex konteynerning boshiga tomon joylashtiriladi | Demo ❯ |
| flex-end | Qatorlar flex konteynerning oxiriga tomon joylashtiriladi | Demo ❯ |
| space-between | Qatorlar flex konteynerda teng taqsimlanadi | Demo ❯ |
| space-around | Qatorlar flex konteynerda teng taqsimlanadi, ikki chetida yarim o‘lchamdagi bo‘shliqlar qoladi | Demo ❯ |
| space-evenly | Qatorlar flex konteynerda teng taqsimlanadi, ularning atrofida teng bo‘shliq qoladi | 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
Grid bilan misol
Barcha elementlar blok yo‘nalishida grid konteynerining oxiriga joylashtiriladi:
#container {
display: grid;
align-content: end;
}
O‘zingiz sinab ko‘ring »
Tegishli sahifalar
CSS darsligi: CSS flexbox
CSS darsligi: CSS grid
CSS ma’lumotnomasi: align-items xususiyati
CSS ma’lumotnomasi: align-self xususiyati
CSS ma’lumotnomasi: justify-content xususiyati
HTML DOM ma’lumotnomasi: alignContent xususiyati
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!