CSS Flexbox (Flexible Box Layout) β bu CSS'ning bir o'lchovli (1D) layout texnologiyasi bo'lib, gorizontal yoki vertikal yo'nalishda elementlarni joylashtirishga imkon beradi. Klassik CSS'da float va position bilan layout qurish murakkab edi. Flexbox 2014 yilda chiqdi va veb-dizaynni juda yengillashtirdi. Bugun har modern veb sayt Flexbox ishlatadi.
Flexbox asosiy tushunchalari
Flexbox \"container\" va \"items\" tushunchalariga asoslanadi. Container β ota element bo'lib, unga display: flex beriladi. Items β container ichidagi bola elementlar.
Misol:
.container {
display: flex;
}
<div class=\"container\">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
Bu kod 3 ta div'ni gorizontal qatorda joylashtiradi.
Main axis va cross axis
Flexbox 2 ta o'q bilan ishlaydi: main axis (asosiy) va cross axis (ko'ndalang). Default'da main axis gorizontal (chap'dan o'ngga). flex-direction'ni o'zgartirsangiz, axis o'zgaradi.
flex-direction: row (default) β gorizontal. column β vertikal. row-reverse β gorizontal teskari. column-reverse β vertikal teskari.
Justify content β main axis bo'yicha
justify-content elementlarni main axis bo'yicha joylashtiradi:
justify-content: flex-start β boshida (default). flex-end β oxirida. center β markazda. space-between β orasidagi bo'shliq teng. space-around β har element atrofi teng. space-evenly β barcha bo'shliqlar teng.
Align items β cross axis bo'yicha
align-items elementlarni cross axis bo'yicha joylashtiradi:
align-items: stretch (default) β barcha balandlikni egallaydi. flex-start β boshida. flex-end β oxirida. center β markazda. baseline β matn bazaviy chiziq bo'yicha.
Flex wrap
Default'da items bir qatorda turadi va kichraytiriladi. flex-wrap: wrap bilan ular keyingi qatorga o'tib turadi.
.container {
display: flex;
flex-wrap: wrap;
}
Items'ga xos xususiyatlar
Items uchun bir nechta muhim xususiyat:
flex-grow β qo'shimcha bo'sh joyni qancha egallaydi (1, 2, 3...). flex-shrink β joy yetmasa qancha kichrayadi. flex-basis β boshlang'ich o'lcham.
Qisqartmasi: flex: 1 0 auto = grow 1, shrink 0, basis auto.
Order β tartibni o'zgartirish
order xususiyati items tartibini o'zgartiradi. Default'da hammasi order: 0. Order qancha yuqori β element shuncha oxirda. Order salbiy bo'lsa β boshida.
Gap β elementlar orasidagi bo'shliq
Eski yondashuvda margin bilan bo'shliq qo'shilardi, lekin uning oxirgi element'ga ham qo'shilishi muammo edi. Yangi gap xususiyati bu masalani hal qiladi:
.container {
display: flex;
gap: 20px;
}
Misol: navigation menu
Klassik navigation menu Flexbox bilan:
.nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
}
Logo chapida, menyu o'rtasida, login tugmasi o'ngida β barchasi bir qatorda, balandlik bo'yicha markazlangan.
Misol: card layout
Mahsulot card'lari Flexbox bilan:
.cards {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.card {
flex: 1 0 300px;
}
Bu cardlar minimum 300px kenglik, qo'shimcha joy bo'lsa kengayadi, kichik ekranda keyingi qatorga o'tadi.
Flexbox vs Grid
Flexbox β 1D (gorizontal yoki vertikal) layout uchun. Grid β 2D (gorizontal va vertikal bir vaqtda). Ikkalasi alohida vazifalar uchun.
Flexbox: navigation, button row, card row. Grid: butun sayt layout, mahsulot katalog grid.
Browser qo'llab-quvvatlash
Flexbox barcha modern brauzerlar tomonidan qo'llab-quvvatlanadi. IE 10+ qisman, IE 11 to'liq. Hozir IE eskirgan β uni qo'llab-quvvatlamasa ham bo'ladi.
Sayt.uz va Flexbox
Sayt.uz dizayni Flexbox keng ishlatadi. Header navigation, blog post grid, footer columns β barchasi Flexbox bilan qurilgan.
Mobile responsive: media queries bilan flex-direction column'ga o'zgartiriladi. Bir kod desktop va mobile uchun ishlaydi.