Flexbox asoslari

O’tgan darsda elementlarni yonma-yon qo’yish uchun inline-block dan foydalandik. U ishlaydi, lekin elementlarni tekislash yoki ular orasidagi joyni teng taqsimlash qiyin kechadi.

Aynan shu muammolar uchun Flexbox yaratilgan.

Bu dars yakunida flex konteyner va elementni ajratasiz, main/cross o’qlarini flex-direction ga qarab topasiz, elementlarni tekislab-taqsimlaysiz, gap, flex, wrap bilan moslashuvchan qator va navbar qura olasiz.

Ikki daraja: konteyner va elementlar

Flexbox har doim ikki darajada ishlaydi:

  • Konteyner — tashqi element, unga display: flex beriladi.
  • Elementlar — konteyner ichidagi bevosita farzandlar.

Xossalarning bir qismi konteynerga, bir qismi elementlarga beriladi.

Kod
<div class="konteyner">
  <div class="element">1</div>
  <div class="element">2</div>
  <div class="element">3</div>
</div>

<style>
.konteyner {
  display: flex;
  gap: 8px;
  background: #f1f5f9;
  padding: 10px;
}
.element {
  background: #2563eb;
  color: white;
  padding: 20px;
  border-radius: 4px;
}
</style>
Natija

Bitta display: flex qatori bilan uchala element qatorga tizildi.

Yo’nalish — flex-direction

Standart holatda elementlar qator bo’ylab tiziladi, lekin buni o’zgartirsa bo’ladi:

Kod
<p>row (standart):</p>
<div class="konteyner row">
  <div class="element">1</div>
  <div class="element">2</div>
  <div class="element">3</div>
</div>

<p>column:</p>
<div class="konteyner column">
  <div class="element">1</div>
  <div class="element">2</div>
  <div class="element">3</div>
</div>

<style>
.konteyner {
  display: flex;
  background: #f1f5f9;
  padding: 8px;
  gap: 6px;
}
.row { flex-direction: row; }
.column { flex-direction: column; }
.element {
  background: #2563eb;
  color: white;
  padding: 12px;
  border-radius: 4px;
}
p { margin: 8px 0 4px; font-family: sans-serif; }
</style>
Natija

justify-content — asosiy o’q bo’ylab

Bu xossa elementlarni yo’nalish bo’ylab taqsimlaydi. row holatida gorizontal bo’yicha ishlaydi:

Kod
<p>flex-start</p>
<div class="k" style="justify-content: flex-start"><div class="e">A</div><div class="e">B</div></div>
<p>center</p>
<div class="k" style="justify-content: center"><div class="e">A</div><div class="e">B</div></div>
<p>space-between</p>
<div class="k" style="justify-content: space-between"><div class="e">A</div><div class="e">B</div></div>
<p>space-around</p>
<div class="k" style="justify-content: space-around"><div class="e">A</div><div class="e">B</div></div>

<style>
.k {
  display: flex;
  background: #f1f5f9;
  padding: 6px;
  margin-bottom: 6px;
}
.e {
  background: #2563eb;
  color: white;
  padding: 10px 18px;
  border-radius: 4px;
}
p { margin: 6px 0 2px; font-family: sans-serif; font-size: 13px; }
</style>
Natija
Qiymat Natija
flex-start Boshiga yig’iladi (standart)
center Markazga yig’iladi
flex-end Oxiriga yig’iladi
space-between Chetlarga, orasi teng
space-around Har element atrofi teng

align-items — ko’ndalang o’q bo’ylab

justify-content yo’nalish bo’ylab ishlagani kabi, align-items unga perpendikulyar yo’nalishda ishlaydi:

Kod
<p>align-items: center</p>
<div class="k" style="align-items: center">
  <div class="e">Qisqa</div>
  <div class="e">Ikki qatorli<br>matn</div>
</div>

<p>align-items: stretch (standart)</p>
<div class="k" style="align-items: stretch">
  <div class="e">Qisqa</div>
  <div class="e">Ikki qatorli<br>matn</div>
</div>

<style>
.k {
  display: flex;
  gap: 8px;
  background: #f1f5f9;
  padding: 8px;
  height: 90px;
  margin-bottom: 8px;
}
.e {
  background: #2563eb;
  color: white;
  padding: 10px;
  border-radius: 4px;
}
p { margin: 6px 0 2px; font-family: sans-serif; font-size: 13px; }
</style>
Natija

gap — elementlar orasi

Elementlar orasidagi masofani margin bilan emas, gap bilan berish qulay:

Kod
<div class="k">
  <div class="e">1</div>
  <div class="e">2</div>
  <div class="e">3</div>
</div>

<style>
.k {
  display: flex;
  gap: 20px;
  background: #f1f5f9;
  padding: 10px;
}
.e {
  background: #2563eb;
  color: white;
  padding: 14px 20px;
  border-radius: 4px;
}
</style>
Natija

gap faqat elementlar orasiga joy qo’yadi — chetlarda ortiqcha bo’shliq qoldirmaydi. margin bilan bunga erishish uchun qo’shimcha hiylalar kerak bo’lardi.

Element kengligi — flex

Flex elementning bo’sh joyni qanday egallashi va tor joyda qanday qisqarishini flex-grow, flex-shrink va flex-basis boshqaradi. Ko’p ishlatiladigan qisqa yozuv:

.element {
  flex: 1 1 220px;
}

Bu element 220px bazadan boshlanishi, bo’sh joy bo’lsa o’sishi va zarur bo’lsa qisqarishi mumkinligini bildiradi. flex: 1 teng ulushli ustunlar uchun qulay, ammo ichki uzun so’z yoki rasm minimal kenglikni oshirishi mumkin.

flex-wrap — qatorga sig’masa

Standart nowrap holatida elementlar imkon qadar qisqarib, bir qatorda qolishga urinadi; minimal kenglik yoki uzun content bo’lsa overflow ham yuz berishi mumkin. flex-wrap keyingi qatorga o’tishga ruxsat beradi:

Kod
<div class="k">
  <div class="e">Element 1</div>
  <div class="e">Element 2</div>
  <div class="e">Element 3</div>
  <div class="e">Element 4</div>
  <div class="e">Element 5</div>
</div>

<style>
.k {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  background: #f1f5f9;
  padding: 10px;
}
.e {
  background: #2563eb;
  color: white;
  padding: 14px;
  border-radius: 4px;
  width: 120px;
}
</style>
Natija

Bu xossa responsiv dizayn uchun muhim — oyna torayganda elementlar o’zi qatorlarga bo’linadi.

Amaliy misol: sayt sarlavhasi

Flexbox eng ko’p ishlatiladigan joy — sahifa yuqorisidagi navbar:

Kod
<header class="bosh">
  <div class="logo">LearnCode</div>
  <nav class="menyu">
    <a href="#">Darslar</a>
    <a href="#">Bo'limlar</a>
    <a href="#">Aloqa</a>
  </nav>
</header>

<style>
.bosh {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  background: #1e293b;
  padding: 14px 20px;
  border-radius: 6px;
}
.logo {
  color: white;
  font-weight: bold;
  font-size: 18px;
  font-family: sans-serif;
}
.menyu {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}
.menyu a {
  color: #cbd5e1;
  text-decoration: none;
  font-family: sans-serif;
  font-size: 14px;
}
.menyu a:focus-visible {
  outline: 3px solid #38bdf8;
  outline-offset: 3px;
}
</style>
Natija

Bu yerda Flexbox ikki marta ishlatildi: tashqi header logotip bilan menyuni chetlarga ajratdi, ichki nav esa havolalarni tizdi. wrap tor joyda bandlarning konteynerdan chiqib ketishini kamaytiradi; murakkab mobil menyuda alohida ochish tugmasi va klaviatura boshqaruvi ham kerak bo’ladi.

Amaliy mashq

Uch kartali qator yarating. Konteynerga flex, gap va wrap, kartalarga flex: 1 1 220px bering. Main va cross o’qlarini izohlang, so’ng flex-direction: column qilib, justify-content va align-items qaysi yo’nalishda ishlashini qayta kuzating.

Qisqacha xulosa

  • Flexbox — elementlarni bir o’lchamda joylashtirish tizimi.
  • Konteynerga display: flex beriladi, farzandlar avtomatik tiziladi.
  • flex-direction — yo’nalish: row yoki column.
  • justify-content — yo’nalish bo’ylab taqsimlash.
  • align-items — ko’ndalang yo’nalish bo’ylab tekislash.
  • Markazlashtirish: justify-content: center + align-items: center.
  • gap — elementlar orasidagi masofa; flex-wrap: wrap — qatorga o’tish.
  • flex elementning o’sish, qisqarish va boshlang’ich o’lchamini boshqaradi.

Keyingi darsda Grid asoslari — ikki o’lchamli, ya’ni qator va ustun bilan birga ishlaydigan joylashuv tizimini ko’ramiz.

Bu dars foydali bo'ldimi?

—
— marta ko'rildi