Flexbox qutilarni to’g’ri joylashtirish.

Tavsif

Flexbox qutilarni to’g’ri joylashtirish.   Reja: 1. Flexbox haqida tushuncha 2. Flexbox – tarkibiy qismlari 3. Flexbox – sintaksisi                         Flexbox  (talaffuzi:  Fleksboks ;  CSS Flexible Box Layout )  CSS3  veb-maket modelidir. Flexbox xossasidan elementlarni konteynerga joylashtirishda hamda ularni turli ekranlar (yoki moslamalar) ga moslashitirishda foydalaniladi. Flexbox hujjat qanday yozilganligi haqida hech qanday taxmin qilmasligini tushunish muhimdir. Ilgari CSS asosan gorizontal va chapdan o'ngga rejimga qaratilgan edi. Zamonaviy matn terish texnikasi yozish rejimlarining to‘liq spektrini qamrab oladi va shuning uchun biz endi matn qatori hujjatning chap yuqori qismidan boshlanib, o‘ng tomonga o‘tishini kutmaymiz, yangi satrlar birin-ketin ostida paydo bo‘ladi. Flexbox va Yozish rejimlari spetsifikatsiyasi o‘rtasidagi bog‘liqlik haqida ko‘proq ma’lumotni keyingi maqolada o‘qishingiz mumkin, ammo quyidagi ta’rif nima uchun biz moslashuvchan elementlarda chap, o‘ng, yuqori va pastki yo‘nalishlar haqida gapirmasligimizni tushuntirishga yordam beradi. Flexbox  — container’ni joylashtirishda muhim vosita hisoblanib, uning yordamida bir nechta qulayliklarga ega bo’lishimiz mumkin display: flex;  — bloklarni yonma-yon joylashtirishda (gorizontal) foydalaniladi justify-content  — elementlarni gorizontal ravishda qanday joylashishlarini belgilab berib. uning property’si uchun bir nechta value berishimiz mumkin flex-start  — justify content uchun odatiy value hisoblanib, bunda bloklarimiz chap tomonda ketma-ket joylashadi flex-end — bunga qarama-qarshi hususiyat hisoblanibm, bunda box elementlari o’ng tomonda joylashadi center — elementlarni o’rtada joylashtirishimiz uchun space-between — elementlar orasida ya’ni bir-biri orasida joy ochib joylashtiradi align-items — elementlarni vertikal joylashtirishda foydalanilib, Uning bir nechra value lari mavjud stretch — align item propertysi uchun odatiy value hisoblanib, unda elementlar vertikal ravishda butun blokni qoplaydi.   wrap — bunda ekranga sig’may qolgan elementlarning bir qismi pastga yangi qatorga ko’chirib tushiriladi wrap-reverse — ekranga sig’may elementlarning qismi teskari tartib bo’yicha pastga yangi qatorga ko’chiriladi          

Hujjat haqida

Kategoriya

Amaliy ishlar | Informatika va AT

Format

DOCX

Hajmi

17 bet

Fayl hajmi

546.98 KB

Muallif

Avazbek Abdusalomov

Qo'shilgan

18.10.2024