Sobes.tech
Intervyu yordami
Resurslar
Intervyuga tayyorgarlik
Resurslar
Ish qidirish
Resurslar
Huquqiy
Savollarga qaytish
Junior

Flexbox nima?

sobes.tech AI

AIdan javob

Flexbox (Flexible Box Layout) CSS ning, murakkab va moslashuvchan maketlar yaratish uchun mo'ljallangan modulidir. U konteyner elementlarining joylashuvi, tekisligi va bo'shliq taqsimotini boshqarishga imkon beradi, hatto ularning o'lchamlari noma'lum yoki dinamik bo'lsa ham.

Flexbox ning asosiy tushunchalari:

  • Asosiy o'q (main axis): Elementlar joylashadigan o'q. Standart holatda gorizontal (chapdan o'ngga).
  • Kross o'q (cross axis): Asosiy o'qga perpendikulyar o'q. Standart holatda vertikal (yuqoridan pastga).
  • Konteyner (flex container): Flexbox xususiyatlari qo'llanadigan element (display: flex yoki display: inline-flex).
  • Elementlar (flex items): Kontenerning bolalar elementlari.

Flex konteyner uchun xususiyatlar:

  • display: flex yoki inline-flex
  • flex-direction: Asosiy o'q yo'nalishini belgilaydi (row, row-reverse, column, column-reverse)
  • flex-wrap: Elementlar yangi satrga o'tadimi yoki yo'qmi (nowrap, wrap, wrap-reverse)
  • justify-content: Elementlarni asosiy o'q bo'ylab joylashtirish (flex-start, flex-end, center, space-between, space-around, space-evenly)
  • align-items: Elementlarni kross o'q bo'ylab joylashtirish (flex-start, flex-end, center, baseline, stretch)
  • align-content: Bir nechta satr yoki ustunlarni kross o'q bo'ylab joylashtirish (flex-start, flex-end, center, space-between, space-around, stretch)

Flex elementlar uchun xususiyatlar:

  • order: Elementning konteyner ichidagi tartibini belgilaydi
  • flex-grow: Element qanday o'sishi kerakligini belgilaydi, ya'ni bo'sh joyni qanday egallash
  • flex-shrink: Joy yetishmasa, element qanday qisqarishi kerakligini belgilaydi
  • flex-basis: Bo'sh joy taqsimlanishidan oldin elementning boshlang'ich o'lchami
  • flex: flex-grow, flex-shrink va flex-basis uchun qisqa yozuv
  • align-self: Elementning kross o'q bo'ylab joylashishini qayta belgilash (flex-start, flex-end, center, baseline, stretch, auto)

Misol:

/* Kontener */
.container {
  display: flex; /* Flexbox ni faollashtiradi */
  flex-direction: row; /* Chiziqli tartib */
  justify-content: center; /* Gorizontal markazlash */
  align-items: center; /* Vertikal markazlash */
  height: 200px; /* Kontener balandligi */
  border: 1px solid black;
}

/* Elementlar */
.item {
  width: 50px;
  height: 50px;
  background-color: lightblue;
  margin: 5px;
}

Flexbox an'anaviy metodlarga nisbatan (float, inline-block, table) moslashuvchan maketlar yaratishni juda osonlashtiradi.

OldingiKeyingi