Flexbox qutilarni to’g’ri joylashtirish.

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