Layout — interfeys, hujjat yoki grafik sahnadagi elementlarning fazoviy joylashuvini belgilovchi tuzilma va qoidalar majmuasidir. Dasturiy interfeysda u container o‘lchami, elementlarning ketma-ketligi, tekislanishi, bo‘shliq va turli ekranlarda qayta joylashishini boshqaradi. Layout faqat bezak emas: ma’lumot iyerarxiyasini, o‘qish yo‘nalishini va boshqaruv elementlaridan foydalanish qulayligini ifodalaydi.
Cheklovlar asosidagi hisoblash
Layout engine mavjud kenglik va balandlikni o‘lchab, har bir elementning preferred, minimum va maximum o‘lchamini hisoblaydi. Parent container bolalarga constraint beradi; bolalar esa o‘z kontenti asosida kerakli o‘lchamni bildiradi. Natija joylashtirish bosqichida koordinatalarga aylantiriladi. Matn shrift, til va satr uzilishiga bog‘liq bo‘lgani uchun uning yakuniy balandligi oldindan doim ma’lum emas.
Web’da normal flow elementlarni hujjat tartibida joylaydi. Flexbox bir o‘lchamli qator yoki ustun uchun, Grid esa ikki o‘lchamli kataklar uchun ishlatiladi. Absolute positioning elementni oqimdan chiqaradi va murakkab responsive sahifada ehtiyotkorlik talab qiladi. Mobil UI toolkitlarida stack, row, column va constraint layout shu fikrlarning turli amalga oshirilishidir.
Responsive moslashuv
Responsive layout faqat desktop elementlarini kichraytirmaydi. Container yoki viewport chegarasiga qarab ustun soni, navigatsiya turi va content priority o‘zgaradi. Breakpoint qurilma nomiga emas, mazmun sig‘may qoladigan o‘lchamga asoslanadi. Rasm nisbatini saqlaydi, jadval scroll yoki ixcham ko‘rinishga o‘tadi, touch target esa kichrayib ketmaydi.
Dinamik matn, tarjima va accessibility font scaling sinovning majburiy qismidir. Inglizcha qisqa label boshqa tilda ikki satr bo‘lishi mumkin. Right-to-left til faqat matnni emas, mantiqiy start va end yo‘nalishlarini ham almashtiradi. Safe area, virtual klaviatura va brauzer zoomi hisobga olinmasa muhim tugma yopilib qoladi.
Vizual iyerarxiya va accessibility
Bo‘shliq bog‘liq elementlarni guruhlaydi, kontrast va o‘lcham esa muhimlikni ko‘rsatadi. Biroq vizual tartib bilan DOM yoki accessibility tree tartibi farq qilmasligi kerak. CSS yordamida kartani chapdan o‘ngga ko‘chirish screen reader o‘qish ketma-ketligini avtomatik o‘zgartirmaydi. Keyboard fokus ham mantiqiy yo‘nalishda yuradi.
Layout shift sahifa yuklangach elementlar kutilmaganda siljishidir. Rasmga o‘lcham ajratish, font yuklanishini boshqarish va banner joyini oldindan belgilash uni kamaytiradi. Performance tahlilida tez-tez qayta o‘lchash va layout thrashing aniqlanadi: kod geometriyani o‘qish va style yozishni navbatma-navbat takrorlasa browser ortiqcha hisob qiladi. Component testlar turli kenglik, uzun kontent va overflow holatini, visual regression esa kutilmagan siljishni tekshiradi.
Component chegaralari
Reusable component tashqi layout bilan ichki layout mas’uliyatini ajratadi. Parent elementning qayerda turishini, component esa o‘z ichidagi ikon, label va holatlarni boshqaradi. Fixed pixel o‘lcham bilan tashqi sahifani taxmin qilish reuse’ni buzadi; intrinsic size, logical spacing va container query moslashuvchanroq. Design tokenlar spacing va breakpoint nomlarini birlashtiradi, ammo har joyda bir xil raqam ishlatish vizual ritmni avtomatik yaratmaydi. Skeleton yakuniy kontentga yaqin geometriyada bo‘lsa loadingdan keyingi siljish kamayadi. Layout regression testi screenshotdan tashqari element overlap, focus visibility va scroll reachabilityni ham tekshirishi kerak.
Print stylesheet, reduced motion va high-contrast rejimi ham alohida layout holatlaridir. Elementni faqat ekrandan tashqariga surish accessibility tree’dan olib tashlamasligi mumkin; visibility semantikasi maqsadga mos tanlanadi.
Bog‘liq tushunchalar
Responsive design, CSS Grid, Flexbox, Constraint, Visual hierarchy, Accessibility, Layout shift