Sobes.tech
Кӯмаки мусоҳиба
Захираҳо
Тайёрии мусоҳиба
Захираҳо
Ҷустуҷӯи кор
Захираҳо
Ҳуқуқӣ
Бозгашт ба саволҳо
Junior

Flexbox чист?

sobes.tech AI

Ҷавоб аз AI

Flexbox (Flexible Box Layout) моделест, ки дар CSS як моделест, ки барои тақсим кардани ҷой байни унсурҳо дар контейнер ва имкониятҳои қавии ҳамоҳангсозӣ пешбинӣ шудааст. Он имкон медиҳад, ки андозаҳо, тартиб ва ҳамоҳангсозии унсурҳои кӯдакии (flex-элементҳо) дар дохили контейнери падар (flex-контейнер) ба осонӣ идора карда шаванд, новобаста аз тартиби аслӣ ё андозаи онҳо.

Концепсияҳои асосии Flexbox:

  • Flex-контейнер: Элемент бо display: flex ё display: inline-flex. Дар он қоидаҳои тартиби барои унсурҳои мустақим муайян карда мешаванд.
  • Flex-элементҳо: Унсурҳои мустақими flex-контейнер. Ба онҳо хусусиятҳои Flexbox татбиқ мешаванд, ки рафтори онҳоро дар дохили контейнер муайян мекунанд.
  • Main axis (оси асосӣ): Оси, ки дар он flex-элементҳо ҷойгир мешаванд. Аз пешфарз горизонталӣ (аз чап ба рост), аммо бо хусусияти flex-direction тағир дода мешавад.
  • Cross axis (оси мувозӣ): Оси, ки перпендикуляр ба оси асосӣ аст.
  • Main start / Main end (шуруъ / охири асосӣ): Шуруъ ва охири дарозии оси асосӣ.
  • Cross start / Cross end (шуруъ / охири мувозӣ): Шуруъ ва охири дарозии оси мувозӣ.

Хусусиятҳои асосии Flexbox барои flex-контейнер:

  • display: Муайян мекунад, ки унсур flex-контейнер аст (flex ё inline-flex).
  • flex-direction: Муайян мекунад самти оси асосӣ (row, row-reverse, column, column-reverse).
  • flex-wrap: Муайян мекунад, ки оё унсурҳои flex ба сатр/ сутун нав мегузаранд, агар ҷой набошад (nowrap, wrap, wrap-reverse).
  • justify-content: Ҳамоҳангсозии унсурҳо дарозии оси асосӣ (flex-start, flex-end, center, space-between, space-around, space-evenly).
  • align-items: Ҳамоҳангсозии унсурҳо дарозии оси мувозӣ (flex-start, flex-end, center, baseline, stretch).
  • align-content: Ҳамоҳангсозии хатҳои унсурҳо (агар бештар бошанд, бо сабаби flex-wrap) дарозии оси мувозӣ.

Хусусиятҳои асосии flex-элементҳо:

  • order: Тартиби намоиши flex-элементро муайян мекунад (аз пешфарз 0).
  • flex-grow: Коэффициенти афзоиши flex-элемент, ки муайян мекунад, ки чӣ қадар метавонад зиёд шавад, то ҷойи дастрасро пур кунад.
  • flex-shrink: Коэффициенти кучуктар кардани flex-элемент, ки муайян мекунад, ки чӣ қадар метавонад кам шавад, то аз афтидан пешгирӣ кунад.
  • flex-basis: Андозаи ибтидоии flex-элемент пеш аз тақсимоти ҷойи озод.
  • flex: Қисмҳои кӯтоҳ барои flex-grow, flex-shrink ва flex-basis.
  • align-self: Баръакс мекунад align-items барои flex-элемент махсус.

Маслиҳат барои истифода:

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-контейнер мекунад */
  justify-content: center; /* Унсурҳоро дар маркази оси асосӣ ҷойгир мекунад */
  align-items: center; /* Унсурҳоро дар маркази оси мувозӣ ҷойгир мекунад */
  height: 200px; /* Барои намоиш */
  border: 1px solid black;
}

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

Афзалиятҳои асосии Flexbox:

  • Ҳамоҳангсозии осон дар уфуқӣ ва амудӣ.
  • Тақсимоти гнучкийи ҷой байни унсурҳо.
  • Легко тағир додани тартиби унсурҳо.
  • Тарҳрезии ҷавобгӯӣ бе истифодаи float ва position.
  • Дастгирии хуб дар браузерҳои муосир.
ГузаштаОянда