Flexbox — CSS Flexible Box Layout modulining qisqa nomi bo‘lib, elementlarni bir o‘lchamli qator yoki ustun bo‘ylab joylashtirish va ular orasidagi bo‘shliqni taqsimlash tizimidir. U navigatsiya, toolbar, card ichki tuzilishi va vertikal markazlash kabi komponent darajasidagi layoutlar uchun ishlatiladi. “Bir o‘lchamli” deganda bir paytda asosiy e’tibor main axisga qaratilishi tushuniladi.
Container va item
Elementga display: flex yoki inline-flex berilganda uning bevosita bolalari flex itemga aylanadi. flex-direction main axisni belgilaydi: row, row-reverse, column yoki column-reverse. Cross axis unga perpendikulyar bo‘ladi.
justify-content main axis bo‘yicha, align-items cross axis bo‘yicha joylashtiradi. Shu sababli “justify doim gorizontal” degan qoida noto‘g‘ri; flex-direction: column bo‘lsa justify vertikal yo‘nalishda ishlaydi.
.toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
O‘sish va qisqarish
flex-grow ortiqcha bo‘shliq qanday taqsimlanishini, flex-shrink joy yetmaganda item qanchalik qisqarishini, flex-basis esa taqsimotdan oldingi bazaviy o‘lchamni belgilaydi. flex: 1 1 0 itemlarni nol basisdan teng bo‘shliq olishga yaqinlashtiradi, flex: 0 0 auto esa tabiiy o‘lchamni saqlaydi.
Grow qiymati mutlaq foiz emas, boshqa itemlarga nisbiy ulushdir. Kontentning min-content o‘lchami itemni kutilganidan kam qisqartirishi mumkin. Uzun matn yoki kod containerdan chiqsa, kerakli itemga min-width: 0 berish ko‘pincha qisqarishga ruxsat beradi.
Wrap
Default flex-wrap: nowrap barcha itemni bir qatorga sig‘dirishga urinadi. wrap yangi flex line yaratadi. Har line bo‘shliqni mustaqil taqsimlaydi; Flexbox barcha qatorlarda ustunlarni aynan teng tutmaydi. Ikki o‘lchamli barqaror satr va ustun kerak bo‘lsa CSS Grid ko‘proq mos keladi.
align-content bir nechta flex line mavjud bo‘lganda container ichidagi line guruhini joylashtiradi. Bitta line bo‘lsa u sezilarli natija bermaydi.
Tartib
order itemning vizual tartibini o‘zgartiradi, ammo DOM va odatda keyboard ketma-ketligini o‘zgartirmaydi. Vizual va semantik tartib farqlansa screen reader hamda keyboard foydalanuvchisi chalkash oqim oladi. Muhim kontent tartibi HTMLda to‘g‘ri bo‘lib, CSS faqat layoutni boshqaradi.
margin-left: auto kabi auto margin main axisdagi mavjud bo‘shliqni olib, bitta itemni chetga surishi mumkin. Logical property margin-inline-start: auto o‘ngdan chapga yoziladigan tillarga yaxshiroq moslashadi.
Intrinsic sizing
Flex itemning yakuniy eni faqat grow raqamiga bog‘liq emas. Uning flex-basis, min-content, max-content, explicit width va min/max cheklovlari algoritmda ishtirok etadi. Default min-width: auto itemni kontentning minimal enidan kichraytirmasligi mumkin. Uzun URL yoki white-space: nowrap butun containerni kengaytiradi. min-width: 0 va matn wrapping qoidasi itemga mavjud joyga kirish imkonini beradi. Rasmda min-width bilan birga max-width: 100% va aspect ratio ko‘riladi.
Baseline va teng balandlik
align-items: baseline turli font o‘lchamidagi matnlarning baseline’ini tekislaydi. stretch cross-size auto bo‘lgan itemlarni line balandligigacha cho‘zadi. Card footerni pastga surish uchun cardni column flex container qilib, contentga flex-grow: 1 berish mumkin. Bu layout vizual balandlikni tenglashtiradi, lekin kontentni DOMdan ajratmaydi.
Nested flex va overflow
Bir nechta nested flex containerda scroll ishlamasa, parentning min-height: auto qiymati sabab child qisqarmayotgan bo‘lishi mumkin. App shell’da kerakli hududga min-height: 0 va overflow: auto beriladi. Scrollni bodydan ichki divga ko‘chirish keyboard, sticky element va mobile viewport xatti-harakatiga ta’sir qiladi.
Bog‘liq tushunchalar
CSS, CSS Grid, flex container, main axis, cross axis, responsive design, box model