Flexbox - HTML va CSS | Softromeda Edu

Flexbox - elementlarni bir qator yoki bir ustunda joylashtirishning zamonaviy usuli. U float va inline-block bilan bog'liq barcha muammolarni hal qiladi.

Asosiy tushuncha #

Flexbox da ikkita rol bor: konteyner (ota) va elementlar (bolalar).

CSS

.konteyner {
    display: flex;
}

Bitta satr - va barcha bolalar yonma-yon turadi.

Flexbox ikki o'q bilan ishlaydi: asosiy va ko'ndalang

Eng muhim tushuncha

justify-content - asosiy o'q bo'ylab (row da gorizontal)
align-items - ko'ndalang o'q bo'ylab (row da vertikal)

flex-direction: column qilsangiz, o'qlar almashadi va justify-content endi vertikal ishlaydi. Bu chalkashlikning asosiy sababi.

Konteyner xossalari #

CSS

.konteyner {
    display: flex;

    /* Yo'nalish */
    flex-direction: row;             /* standart: chapdan o'ngga */
    flex-direction: column;          /* yuqoridan pastga */
    flex-direction: row-reverse;
    flex-direction: column-reverse;

    /* Sig'masa keyingi qatorga o'tsinmi? */
    flex-wrap: nowrap;               /* standart: siqiladi */
    flex-wrap: wrap;                 /* yangi qatorga o'tadi */

    /* Ikkalasi birga */
    flex-flow: row wrap;

    /* Asosiy o'q bo'ylab tekislash */
    justify-content: flex-start;     /* standart */
    justify-content: center;
    justify-content: flex-end;
    justify-content: space-between;  /* chetlarga, orasi teng */
    justify-content: space-around;
    justify-content: space-evenly;

    /* Ko'ndalang o'q bo'ylab */
    align-items: stretch;            /* standart: cho'ziladi */
    align-items: center;
    align-items: flex-start;
    align-items: flex-end;
    align-items: baseline;

    /* Elementlar orasidagi masofa */
    gap: 1rem;
    gap: 1rem 2rem;                  /* qator va ustun alohida */
}

justify-content elementlarni asosiy o'q bo'ylab taqsimlaydi

Element xossalari #

CSS

.element {
    /* Bo'sh joyni qanday egallaydi */
    flex-grow: 0;         /* standart: kengaymaydi */
    flex-grow: 1;         /* qolgan joyni egallaydi */

    /* Joy yetmasa qanday siqiladi */
    flex-shrink: 1;       /* standart: siqiladi */
    flex-shrink: 0;       /* siqilmaydi */

    /* Boshlang'ich o'lcham */
    flex-basis: auto;
    flex-basis: 200px;

    /* Uchalasi birga */
    flex: 0 1 auto;       /* standart */
    flex: 1;              /* = 1 1 0  - eng ko'p ishlatiladi */
    flex: none;           /* = 0 0 auto - qat'iy o'lcham */

    /* Faqat shu elementni tekislash */
    align-self: center;

    /* Tartibni o'zgartirish */
    order: 2;             /* standart 0 */
}

flex: 1 nima qiladi?

Bu eng ko'p ishlatiladigan yozuv. U elementga "qolgan bo'sh joyni to'liq egalla" deb aytadi. Bir nechta elementda flex: 1 bo'lsa, ular joyni teng bo'lishadi.

CSS

.chap  { flex: 1; }      /* 50% */
.ong   { flex: 1; }      /* 50% */

.chap  { flex: 2; }      /* 66% */
.ong   { flex: 1; }      /* 33% */

Amaliy shablonlar #

1. Sarlavha paneli #

CSS

.panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1rem 1.5rem;
}

.panel__menyu {
    display: flex;
    gap: 1.25rem;
    margin-left: auto;      /* o'ngga suradi */
}

HTML

<header class="panel">
    <a class="logo" href="/">Softromeda</a>
    <nav class="panel__menyu">
        <a href="/">Bosh sahifa</a>
        <a href="/darsliklar">Darsliklar</a>
        <a href="/aloqa">Aloqa</a>
    </nav>
</header>

margin-left: auto - flexbox hiylasi

Flex elementga margin-left: auto bersangiz, u o'ngga suriladi va undan oldingi elementlar chapda qoladi. Bu justify-content dan ko'ra moslashuvchan - bitta elementni ajratib qo'yish uchun ideal.

2. Mukammal markazlashtirish #

CSS

.markaz {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

Uch qator - va element ekran markazida. CSS tarixida bu masala yillar davomida og'riqli bo'lgan.

3. Kartochkalar tarmog'i #

CSS

.kartalar {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}

.karta {
    flex: 1 1 280px;        /* kamida 280px, keyin kengayadi */
}

Bu media so'rovlarsiz moslashuvchan tarmoq beradi: keng ekranda 4 ta ustun, telefonda 1 ta.

4. Yopishqoq pastki qism #

CSS

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
}

main {
    flex: 1;               /* barcha bo'sh joyni egallaydi */
}

Mazmun kam bo'lsa ham, footer har doim sahifa pastida qoladi.

5. Media obyekti #

CSS

.media {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.media__avatar {
    flex: none;            /* siqilmaydi */
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

.media__tana {
    flex: 1;               /* qolgan joyni oladi */
    min-width: 0;          /* uzun matn siqilishi uchun */
}

min-width: 0 - yashirin muammo

Flex elementning standart min-width qiymati auto - ya'ni u mazmunidan kichik bo'lolmaydi. Uzun so'z yoki overflow: hidden bo'lgan matn konteynerdan chiqib ketadi.

min-width: 0 buni hal qiladi. Bu Flexbox dagi eng ko'p uchraydigan tuzoq.

6. Forma qatori #

CSS

.qidiruv {
    display: flex;
    gap: 0.5rem;
}

.qidiruv input {
    flex: 1;
}

.qidiruv button {
    flex: none;
}

7. Vertikal markazlashtirilgan tugma #

CSS

.tugma {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.3rem;
}

Ikonka va matn bir xil balandlikda markazlashadi - line-height bilan o'ynash shart emas.

`gap` - eng foydali yangilik #

CSS

/* Eski usul - oxirgi elementni tuzatish kerak */
.eski > * { margin-right: 1rem; }
.eski > *:last-child { margin-right: 0; }

/* Zamonaviy */
.yangi { display: flex; gap: 1rem; }

gap faqat elementlar orasiga masofa qo'yadi - chetlarda bo'shliq qolmaydi.

To'liq misol: darslik kartochkasi #

CSS

.darslik {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    height: 100%;
}

.darslik__rasm {
    width: 100%;
    height: 160px;
    object-fit: cover;
}

.darslik__tana {
    display: flex;
    flex-direction: column;
    flex: 1;                    /* qolgan joyni egallaydi */
    padding: 1.25rem;
    gap: 0.6rem;
}

.darslik__yorliq {
    display: inline-flex;
    align-self: flex-start;     /* faqat matn kengligida */
    background: #dbeafe;
    color: #1e40af;
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.darslik__sarlavha {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.35;
}

.darslik__matn {
    margin: 0;
    color: #64748b;
    font-size: 0.9rem;
    flex: 1;                    /* tugmani pastga suradi */
}

.darslik__past {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.8rem;
    border-top: 1px solid #f1f5f9;
    font-size: 0.8rem;
    color: #94a3b8;
}

/* Konteyner */
.darsliklar {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    align-items: stretch;       /* barchasi bir xil balandlikda */
}

.darsliklar > * {
    flex: 1 1 280px;
}

Bir xil balandlikdagi kartochkalar

align-items: stretch (standart qiymat) barcha kartochkalarni eng balandiga tenglashtiradi. Ichkarida flex: 1 bilan matn qismini cho'zib, pastki qismni har doim pastga surish mumkin.

float bilan bu masalani yechish deyarli imkonsiz edi.

Flexbox va Grid: qaysi biri? #

	Flexbox	Grid
O'lchov	Bir o'lchamli (qator YOKI ustun)	Ikki o'lchamli (qator VA ustun)
Qachon	Menyu, tugmalar, kartochka ichi	Sahifa tuzilmasi, galereya
Yondashuv	Mazmunga qarab	Tuzilmaga qarab

Ikkalasini birga ishlatish odatiy hol: Grid bilan sahifa tuzilmasi, Flexbox bilan komponent ichi.

Amaliy topshiriq

Sarlavha paneli yarating: chapda logotip, o'ngda menyu (space-between).
Kartochkalar tarmog'ini flex-wrap va flex: 1 1 280px bilan quring. Brauzer oynasini kichraytirib, moslashishini kuzating.
min-height: 100vh bilan yopishqoq footer qiling.
Media obyekti yarating: avatar + matn. min-width: 0 ni olib tashlab, uzun matn bilan nima bo'lishini ko'ring.
Uchta tugmani markazda joylashtiring va gap bilan orasini oching.
flex-direction: column qilib, justify-content qanday o'zgarishini kuzating.
flexboxfroggy.com o'yinini o'ynang - 24 daraja, juda foydali.

Xulosa #

display: flex konteynerni flex ga aylantiradi, bolalar flex elementlariga.
justify-content asosiy o'q, align-items ko'ndalang o'q bo'ylab tekislaydi.
flex-direction: column o'qlarni almashtiradi.
flex: 1 - "qolgan joyni egalla", eng ko'p ishlatiladigan qiymat.
gap margin dan ancha qulay - chetlarda ortiqcha bo'shliq qoldirmaydi.
margin-left: auto bitta elementni o'ngga suradi.
min-width: 0 uzun matnli flex elementlardagi klassik muammoni hal qiladi.
Flexbox - bir o'lchamli, Grid - ikki o'lchamli joylashuv uchun.

Keyingi bo'limda ikki o'lchamli joylashuv - CSS Grid ni o'rganamiz.