align-items xususiyati. - Ushbu xususiyat yordamida flex elementlar vertikal o'q (konteyner balandligi) bo'yicha tekislash uchun ishlatiladi.
- align-items: center xolati elementlar konteyner balandligi bo'yicha markazdan joylashishi.
- .flex-container {
- display: flex;
- height: 200px;
- align-items: center;
- }
- flex-start - vertical ravishda yuqoridan,
- flex-end - pastdan va
- stretch - kontainer balandligi bo'yicha to'liq joylashadi. Bu qolgan qiymatlarni mustaqil ravishda tekshirb ko'rishingiz maqsadga muofiq bo'ladi.
- E'tibor bering: flex-direction xususiyati yordamida flex elementlarning ketma-ket joylashish yo'nalishi o'zgartirilgan taqdirda justify-content va align-items xususiyatlari ham mos ravishda yo'nalishini o'rgartiradi.
Tajriba: - Tajriba:
- Elementni haqiyqiy markazga joylashtirish.
Tajriba - Bu tajriba amaliyotda juda kam ko'p qo'llaniladi va ko'pgina qiyinchiliklarni bartaraf etadi. Yuqorida ko'rganimizdek Flex elementni gorizantal joylashtirish uchun justify-content va vertical uchun align-items xususiyatlaridan foydalanamiz.
Tajriba - index.html
-
- style.css
- .box {
- display: flex;
- align-items: center;
- justify-content: center;
- }
- .box div {
- width: 100px;
- height: 100px;
- }
Child Elementlar (Items) - flex konteyner ichida joylashgan farzand elementlar avtomatik ravishda moslashuvchanlik xususiyatiga ega bo'ladi va ular flex element hisoblanadi.
- flex elementlar (ko'k rangda)
- Bu qismda child elmentlar xususiyatlari:
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self bilan tanishamiz.
order xususiyati. - order xususiyati flex elementlarning joylashish tartibni nazorat qilish uchun qo'llaniladi.
- elementlar tartibi o'zgarishi.
- HTML(siz foydalanganingizda stillar css faylda child-elementlarga yozishingiz qulayroq)
Do'stlaringiz bilan baham: |
