Flexbox nima uchun ishlatiladi?

Flexbox CSSda moslashuvchan va moslashuvchan maketlar yaratish uchun ishlatiladi. U elementlarni konteyner ichida osongina tekislashtirish va tarqatish imkonini beradi, ularning o'lchamlari va joylashuvi mavjud bo'shliqga qarab avtomatik ravishda sozlanadi.

Flexboxning asosiy tushunchalari:

• Flex konteyner: display: flex; yoki display: inline-flex; qo'llanadigan element. U flex elementlarni o'z ichiga oladi.
• Flex elementlar: Flex konteynerining to'g'ridan-to'g'ri bolalari.

Flexbox quyidagilarni nazorat qilish imkonini beradi:

• Elementlarning joylashish yo'nalishi (flex-direction).
• Elementlarning keyingi satr/ustuniga o'tishi (flex-wrap).
• Asosiy o'q bo'ylab elementlarning tekislanishi (justify-content).
• Transversal o'q bo'ylab elementlarning tekislanishi (align-items va align-content).
• Elementlarning ko'rsatish tartibi (order).
• Elementlar orasidagi bo'sh joyning taqsimoti (flex-grow, flex-shrink, flex-basis).

Asosiy foydalanish misoli:

.konteyner {
  display: flex;
  justify-content: center; /* Gorizontal markazlashtirish */
  align-items: center; /* Vertikal markazlashtirish */
}

.element {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  margin: 10px;
}

<div class="konteyner">
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
</div>