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

Flexbox nima?

sobes.tech AI

AIdan javob

Flexbox (Moslashuvchan Qutiya) CSS'da bitta o'lchamli model bo'lib, u konteyner ichidagi elementlar orasida joyni taqsimlash va kuchli joylashish imkoniyatlarini taqdim etadi. Bu, bolalar elementlarining (flex elementlar) o'lchamlari, tartibi va joylashishini, ota konteyner (flex konteyner) ichida, ularning asl tartibi yoki o'lchamidan qat'i nazar, oson boshqarish imkonini beradi.

Flexboxning asosiy tushunchalari:

  • Flex konteyner: display: flex yoki display: inline-flex bilan belgilangan element. Bu konteynerda, uning to'g'ridan-to'g'ri bolalar elementlari uchun dizayn qoidalari belgilangan.
  • Flex elementlar: Flex konteynerining to'g'ridan-to'g'ri bolalar elementlari. Ular uchun Flexbox xususiyatlari qo'llanadi, ular konteyner ichida qanday harakat qilishini belgilaydi.
  • Asosiy o'q (main axis): Flex elementlar joylashadigan o'q. Standart ravishda gorizontal (chapdan o'ngga), lekin flex-direction bilan o'zgartirilishi mumkin.
  • Kross o'q (cross axis): Asosiy o'qga perpendikulyar o'q.
  • Asosiy boshlanish (main start) / Asosiy tugash (main end): Asosiy o'q bo'ylab boshlanish va tugash.
  • Kross boshlanish (cross start) / Kross tugash (cross end): Kross o'q bo'ylab boshlanish va tugash.

Flexboxning asosiy xususiyatlari:

  • display: Element flex konteyner ekanligini belgilaydi (flex yoki inline-flex).
  • flex-direction: Asosiy o'q yo'nalishini belgilaydi (row, row-reverse, column, column-reverse).
  • flex-wrap: Elementlar yangi satrga/ustuniga o'tadimi yoki yo'qmi, belgilaydi (nowrap, wrap, wrap-reverse).
  • justify-content: Elementlarni asosiy o'q bo'ylab joylashtiradi (flex-start, flex-end, center, space-between, space-around, space-evenly).
  • align-items: Elementlarni kross o'q bo'ylab joylashtiradi (flex-start, flex-end, center, baseline, stretch).
  • align-content: Flex satrlarini (bir nechta bo'lsa) kross o'q bo'ylab joylashtiradi.

Flex elementlar uchun asosiy xususiyatlar:

  • order: Flex elementining ko'rsatilish tartibini belgilaydi (standart 0).
  • flex-grow: Flex elementining o'sish koeffitsienti, u qanchalik kengayishi mumkinligini belgilaydi.
  • flex-shrink: Flex elementining qisqarish koeffitsienti, u qanchalik qisqarishi mumkinligini belgilaydi.
  • flex-basis: Bo'sh joyni taqsimlashdan oldin flex elementining boshlang'ich o'lchami.
  • flex: flex-grow, flex-shrink va flex-basis uchun qisqartma.
  • align-self: Maxsus flex element uchun align-items ni o'zgartiradi.

Misol:

HTML:

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

CSS:

.flex-container {
  display: flex; /* Flex konteyner qilish */
  justify-content: center; /* Asosiy o'q bo'ylab elementlarni markazga joylashtirish */
  align-items: center; /* Kross o'q bo'ylab elementlarni markazga joylashtirish */
  height: 200px; /* Ko'rsatish uchun */
  border: 1px solid black;
}

.flex-item {
  width: 50px;
  height: 50px;
  background-color: lightblue;
  margin: 10px;
}

Flexboxning asosiy afzalliklari:

  • Elementlarni gorizontal va vertikal ravishda osongina joylashtirish.
  • Elementlar orasida joyni moslashuvchan taqsimlash.
  • Elementlarning tartibini oson o'zgartirish.
  • Float va pozitsiyadan foydalanmasdan moslashuvchan dizayn.
  • Zamonaviy brauzerlarda yaxshi qo'llab-quvvatlash.
OldingiKeyingi