Flex Item — flex-grow, flex-shrink, flex-basis, order, align-self

~20 daq · CSS · Layout — Flexbox

Muammodan boshlaylik

Uch vazifa:

  1. Qidiruv paneli: input qolgan barcha joyni egallasin, yonidagi tugma esa o'z o'lchamida qolsin
  2. Sahifa: chap menyu 250px, asosiy qism — qolgan hammasi
  3. Kartochkalar: hammasi teng kenglikda, nechta bo'lishidan qat'i nazar

14–15-darslarda konteynerni boshqardik. Endi — elementlarning o'zini: har biri qancha joy olishi, o'sishi va qisqarishi.

Bo'sh joy qanday taqsimlanadi

Brauzer har bir flex qatorni shunday hisoblaydi:

1. Har bir elementning boshlang'ich o'lchami   → flex-basis
2. Konteyner − barcha boshlang'ich o'lchamlar  → bo'sh joy (musbat yoki manfiy)
3. Musbat bo'lsa  → elementlar O'SADI          → flex-grow nisbatida
4. Manfiy bo'lsa  → elementlar QISQARADI       → flex-shrink nisbatida

Uchta xususiyat — uchta qadam.

flex-grow — o'sish

Bo'sh joyning qancha ulushini olishi. Standart — 0 (o'smaydi).

.search-input {
  flex-grow: 1;    /* barcha bo'sh joyni oladi */
}

<form class="search">
  <input class="search-input" type="search" placeholder="Qidirish...">
  <button>Qidirish</button>
</form>

│[input ............................................][Qidirish]│

1-vazifa hal: tugma o'z o'lchamida, input — qolgan hammasi.

Nisbatlar

.a { flex-grow: 1; }
.b { flex-grow: 2; }

Bo'sh joy 300px bo'lsa: .a +100px, .b +200px (1:2 nisbatda). Diqqat: bu bo'sh joyni bo'lish, butun kenglikni emas — elementlarning o'zi baribir turlicha bo'lishi mumkin.

flex-shrink — qisqarish

Joy yetmaganda qanchalik qisqarishi. Standart — 1 (hammasi teng nisbatda qisqaradi).

.logo {
  flex-shrink: 0;    /* hech qachon qisqarmasin */
}

Tipik muammo: tor ekranda ikonka yoki avatar "siqilib", tuxum shakliga kiradi:

.avatar {
  width: 40px;
  height: 40px;
  flex-shrink: 0;     /* yumaloq avatar doim 40×40 */
}

Qisqarishi mumkin bo'lmagan har qanday narsa (ikonka, logo, avatar, belgilangan o'lchamli tugma) — flex-shrink: 0.

[!INFO] Flex elementlar odatda kontentidan kichikroq bo'lmaydi: standart min-width: auto — eng uzun so'z yoki rasm kengligi. Shuning uchun uzun matnli element qisqarmay, konteynerdan chiqib ketishi mumkin. Yechim: shu elementga min-width: 0 (keyin text-overflow: ellipsis ham ishlaydi — 10-dars).

flex-basis — boshlang'ich o'lcham

O'sish va qisqarishdan oldingi o'lcham. Standart — auto (elementning width i yoki kontent o'lchami).

.sidebar {
  flex-basis: 250px;
  flex-shrink: 0;
}

.main {
  flex-grow: 1;
  flex-basis: 0;
}

2-vazifa hal: menyu 250px va qisqarmaydi, asosiy qism qolgan hammasini oladi.

flex-basis va width: flex element ichida flex-basis ustun turadi (auto bo'lmasa). row da u kenglikni, column da — balandlikni belgilaydi.

flex-basis: 0 va auto — farqi

flex-basis: auto — avval kontent o'lchami, keyin BO'SH JOY bo'linadi:
│[ Qisqa ....... ][ Juda uzun matnli element ....... ]│   turli kenglikda

flex-basis: 0 — avval hammasi 0, keyin BUTUN JOY bo'linadi:
│[ Qisqa ..................][ Juda uzun matnli ........]│   teng kenglikda

flex — qisqa yozuv (amalda shu ishlatiladi)

flex: <grow> <shrink> <basis>;
Yozuv Ma'nosi Qachon
flex: 1 1 1 0% Teng ustunlar; qolgan joyni egallash
flex: auto 1 1 auto Kontentga qarab, lekin o'sadi
flex: none 0 0 auto Qat'iy — o'smaydi, qisqarmaydi
flex: 0 0 250px Aniq 250px Belgilangan sidebar
flex: 2 2 1 0% Boshqalardan 2 baravar keng

3-vazifa hal:

.cards {
  display: flex;
  gap: 24px;
}

.card {
  flex: 1;      /* 2 ta bo'lsa — yarmi, 5 ta bo'lsa — beshdan biri */
}

[!TIP] Alohida flex-grow/flex-shrink/flex-basis o'rniga qisqa flex ni ishlating. U standart qiymatlarni to'g'ri qo'yadi — masalan, flex: 1 flex-basis ni 0% qiladi, bu esa teng ustunlar uchun aynan kerak. Faqat flex-grow: 1 yozsangiz, basis auto qolib, ustunlar teng bo'lmaydi.

order — vizual tartib

.item-a { order: 2; }
.item-b { order: 1; }    /* birinchi bo'lib ko'rinadi */

Standart — 0. Kichik qiymat — oldinroq; manfiy ham mumkin (order: -1 — eng boshiga).

@media (max-width: 768px) {
  .sidebar {
    order: 2;    /* telefonda sidebar asosiy kontentdan keyin */
  }
}

[!WARNING] reverse kabi (14-dars), order faqat ko'rinishni o'zgartiradi. Tab tugmasi va ekran o'quvchilar HTML tartibida yuradi — foydalanuvchi uchun fokus ekranda "sakrab" yuradi. Mazmun tartibi muhim bo'lsa — HTML ni to'g'ri tartibda yozing.

align-self — bitta elementning tekislanishi

15-darsdagi align-items ni bitta element uchun bekor qiladi:

.container {
  display: flex;
  align-items: flex-start;
}

.special {
  align-self: center;     /* faqat shu element o'rtada */
}

Qiymatlari: auto (konteyner qiymati), flex-start, center, flex-end, stretch, baseline.

Amaliy misol: chat xabari

<div class="message">
  <img class="avatar" src="otabek.jpg" alt="">
  <div class="body">
    <div class="meta">
      <strong class="name">Abdurahmonbekov Muhammadali</strong>
      <time>14:23</time>
    </div>
    <p>Salom! Flexbox darsini o'qib chiqdim...</p>
  </div>
</div>

.message {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.avatar {
  flex: none;              /* qat'iy 40×40, siqilmaydi */
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.body {
  flex: 1;                 /* qolgan joy */
  min-width: 0;            /* uzun matn konteynerdan chiqib ketmasin */
}

.meta {
  display: flex;
  gap: 8px;
  align-items: baseline;
}

.name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.meta time {
  flex: none;
  margin-left: auto;       /* vaqt — o'ng chetda */
}

Bitta komponentda darsdagi deyarli hamma narsa: flex: none, flex: 1, min-width: 0, margin-left: auto, align-items.

Nima uchun shunday?

Nima uchun flex elementlar standartda qisqaradi (shrink: 1), lekin o'smaydi (grow: 0)?

Ikkalasi ham "zararsiz" standart: kontentni yo'qotmaslik va dizaynni kutilmaganda buzmaslik. O'smaslik — elementlar o'z tabiiy o'lchamida qoladi, siz ataylab so'ramaguningizcha bo'sh joyni egallamaydi (aks holda oddiy menyuning havolalari butun ekran bo'ylab cho'zilardi). Qisqarish esa — joy yetmaganda elementlar konteynerdan chiqib, sahifani buzish o'rniga moslashadi (masalan, tor telefon ekranida). Natija: display: flex ni qo'yishning o'zi xavfsiz va oldindan aytib bo'ladigan natija beradi, flex xususiyati esa nimani o'zgartirmoqchi ekaningizni aniq aytish uchun.

Xulosa

Eslab qoling:

  • Taqsimlash: flex-basis (boshlang'ich) → bo'sh joy → flex-grow yoki flex-shrink
  • flex-grow — bo'sh joy ulushi (standart 0); flex-shrink — qisqarish (standart 1)
  • flex-shrink: 0 — ikonka, logo, avatar siqilmasin
  • min-width: 0 — uzun matnli element qisqara olsin
  • Qisqa yozuv: flex: 1 (teng ustunlar), flex: none (qat'iy), flex: 0 0 250px
  • order va align-self — bitta element uchun; order faqat vizual
  • margin-left: auto — elementni chetga surish

Keyingi dars

17-dars: Flexbox bilan amaliy layoutlar — nav, card, markazlash