Flexbox asoslari

Flexbox asoslari

Flexbox — bu elementlarni qator yoki ustunda joylashtirish va ular orasidagi hamda atrofidagi bo'shliqni boshqarish uchun mo'ljallangan CSS joylashuv vositasi. Flexbox dan oldin narsalarni markazlashtirish va ularni teng oraliqda joylashtirish og'riqli edi. Endi bu bir necha qator kod oladi.

Flexni yoqish

Flexbox ni konteynerga (ota) qo'llaysiz. Uning bevosita bolalari avtomatik ravishda birga tekislanadigan flex elementlariga (flex items) aylanadi.

.container {
  display: flex;
}

Standart bo'yicha elementlar chapdan o'ngga qator bo'lib joylashadi.

Asosiy o'q (main axis) va ko'ndalang o'q (cross axis)

Flexbox ikkita yo'nalish nuqtai nazaridan fikrlaydi:

• Asosiy o'q (main axis) — elementlar oqib boradigan yo'nalish. Qatorda bu gorizontal (chapdan o'ngga).
• Ko'ndalang o'q (cross axis) — unga perpendikulyar. Qatorda bu vertikal (yuqoridan pastga).

Bu muhim, chunki ikkita tekislash xususiyati har biri bitta o'qda ishlaydi.

justify-content va align-items

• justify-content elementlarni asosiy o'q bo'ylab joylashtiradi. Keng tarqalgan qiymatlar: flex-start (standart), center, space-between (elementlar orasida teng oraliqlar), space-around.
• align-items elementlarni ko'ndalang o'q bo'ylab joylashtiradi. Keng tarqalgan qiymatlar: stretch (standart), center, flex-start, flex-end.

Sevimli kombinatsiya — biror narsani ikkala tomonga ham mukammal markazlashtirish:

.container {
  display: flex;
  justify-content: center; /* center horizontally */
  align-items: center;     /* center vertically */
}

Oraliq uchun gap

gap xususiyati flex elementlari orasiga har biriga margin qo'shmasdan izchil bo'shliq qo'shadi. Bu toza va tushunish oson.

.container {
  display: flex;
  gap: 16px;
}

Kartalar qatori

Buni birlashtirsak — qatorda uchta karta, teng oraliqda, hammasi bir xil balandlikda:

.card-row {
  display: flex;
  gap: 20px;
  align-items: stretch;      /* cards match the tallest one */
  justify-content: center;   /* group is centered */
}
 
.card {
  flex: 1;                   /* each card grows to share the space equally */
  padding: 16px;
  border: 1px

<div class="card-row">
  <div class="card">One</div>
  <div class="card">Two</div>
  <div class="card">Three</div>
</div>

Bu yerda flex: 1 har bir kartaga o'sib, mavjud kenglikni teng bo'lishishni aytadi, shuning uchun ular bir xil o'lchamda bo'lib chiqadi. Flexbox matematikani siz uchun bajaradi.

Suhbat maslahatlari

• display: flex ota konteynerga qo'yilishini va uning bolalari flex elementlariga aylanishini eslang.
• O'q g'oyasini tushuntiring: justify-content asosiy o'q bo'ylab, align-items esa ko'ndalang o'q bo'ylab ishlaydi.
• Har bir bolaga margin qo'shish o'rniga elementlarni joylashtirishning zamonaviy usuli sifatida gap ni eslatib o'ting.