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

Sahifada elementlarni joylashtirish uchun flexbox qanday ishlatiladi?

sobes.tech AI

AIdan javob

Flexbox (yoki Flexible Box Layout) — bu CSS moduli bo'lib, konteyner ichidagi elementlarning moslashuvchan maketlarini yaratish uchun mo'ljallangan, bo'shliqni osongina taqsimlash va elementlarni tekislash imkonini beradi, hatto ularning o'lchamlari noma'lum yoki dinamik ravishda o'zgarayotgan bo'lsa ham.

Asosiy konsept Flexbox — bu flex-konteyner va uning flex-elementlari.

Flex-konteyner uchun xususiyatlar (display: flex;):

  • flex-direction: flex-elementlarning joylashish yo'nalishini belgilaydi (asosiy o'q).

    • row (standart): gorizontal, chapdan o'ngga.
    • row-reverse: gorizontal, o'ngdan chapga.
    • column: vertikal, yuqoridan pastga.
    • column-reverse: vertikal, pastdan yuqoriga.

  • flex-wrap: flex-elementlar yangi satrga o'tkaziladimi yoki yo'qligini belgilaydi.

    • nowrap (standart): barcha elementlar bir satrda.
    • wrap: yangi satrga o'tkaziladi.
    • wrap-reverse: yangi satrga o'tkaziladi, lekin teskari tartibda.

  • justify-content: asosiy o'q bo'ylab flex-elementlarni tekislaydi.

    • flex-start (standart): asosiy o'qqa boshlanish joyida.
    • flex-end: asosiy o'qqa oxirida.
    • center: markazda.
    • space-between: elementlar orasida teng bo'shliq.
    • space-around: elementlar atrofida teng bo'shliq.
    • space-evenly: elementlar va atrofida teng bo'shliq.

  • align-items: flex-elementlarni perpendicular (perpendikulyar) o'q bo'ylab tekislaydi.

    • stretch (standart, agar elementlar balandligi/kengligi belgilangan bo'lmasa): elementlarni balandlik/kenglik bo'yicha cho'zadi.
    • flex-start: boshlanish joyida.
    • flex-end: oxirida.
    • center: markazda.
    • baseline: matnning asosiy chizig'iga mos ravishda.

  • align-content: satrlar bo'ylab flex satrlarini tekislaydi, agar satrlar bo'lsa (flex-wrap: wrap). Bu justify-content ga o'xshash, lekin satrlar uchun.

    • stretch (standart): satrlarni cho'zadi.
    • flex-start: boshlanish joyida.
    • flex-end: oxirida.
    • center: markazda.
    • space-between: satrlar orasida teng bo'shliq.
    • space-around: satrlar atrofida teng bo'shliq.

  • gap, row-gap, column-gap: flex-elementlar orasidagi bo'shliqni belgilaydi.

.flex-container {
  display: flex; /* Flex-konteyner qilish */
  flex-direction: row; /* Gorizontal joylashish */
  flex-wrap: wrap; /* Yangi satrga o'tkazish */
  justify-content: center; /* Markazga tekislash */
  align-items: center; /* Vertikal markazlash */
  gap: 10px; /* 10px bo'shliq */
}

Flex-elementlar uchun xususiyatlar (flex-konteynerning to'g'ridan-to'g'ri farzandlari):

  • order: elementlarning tartibini belgilaydi (standart 0). Kichikroq qiymatdagi elementlar avvalroq chiqadi.

  • flex-grow: bo'sh joyni qanday taqsimlashni belgilaydi. Standart 0.

  • flex-shrink: joy yetishmaganda qanday siqilishini belgilaydi. Standart 1.

  • flex-basis: elementning boshlang'ich o'lchamini belgilaydi, bo'sh joy taqsimlanishidan oldin. Misol uchun, px, %, rem, auto va h.k. (standart auto).

  • flex: qisqartirilgan xususiyat, flex-grow, flex-shrink, flex-basis ni o'z ichiga oladi.

  • align-self: elementning perpendicular o'q bo'ylab tekislanishini belgilaydi, align-items ni o'zgartiradi. Bir xil qiymatlarni oladi.

.flex-item {
  order: 2; /* Bu element ikkinchi bo'ladi */
  flex-grow: 1; /* Bo'sh joyni to'liq egallaydi */
  flex-shrink: 0; /* Siqilmaydi */
  flex-basis: 100px; /* 100px boshlang'ich o'lcham */
  align-self: flex-start; /* Boshlanish joyida */
}

.another-item {
  flex: 1 1 auto; /* grow: 1, shrink: 1, basis: auto */
}

Flexbox turli maketlarni yaratishga imkon beradi, oddiy tekislashlardan murakkabroq moslashuvchan tuzilmalargacha, bo'shliqni boshqarish va elementlarni konteyner ichida tekislash orqali.

OldingiKeyingi