CSSda flex nima uchun ishlatiladi?

Flexbox, elementlarni bitta o‘lchovli tartibda joylashtirish uchun ishlatiladi. U joylashishni, bo‘shliq taqsimotini va elementlarning tartibini boshqarishga imkon beradi.

Asosiy tushunchalar:

• Flex konteyner: display: flex yoki display: inline-flex bilan belgilangan ota-elemnt.
• Flex elementlar: Flex konteynerning bolalar elementlari.
• Asosiy o‘q: Flex konteynerning asosiy o‘qi. flex-direction xususiyati bilan belgilangan. Standartda gorizontal (row).
• Kross o‘q: Asosiy o‘qqa perpendikulyar o‘q.

Flex konteyner uchun asosiy xususiyatlar:

• display: Element flex konteyner ekanligini belgilaydi (flex yoki inline-flex).
• flex-direction: Asosiy o‘q yo‘nalishini belgilaydi (row, row-reverse, column, column-reverse).
• justify-content: Flex elementlarni asosiy o‘q bo‘ylab joylashtiradi (flex-start, flex-end, center, space-between, space-around, space-evenly).
• align-items: Flex elementlarni kross o‘q bo‘ylab joylashtiradi (flex-start, flex-end, center, baseline, stretch).
• flex-wrap: Bo‘sh joy yetishmasa, flex elementlar yangi satr yoki ustunlarga o‘tadimi yoki yo‘qmi (nowrap, wrap, wrap-reverse).

Flex elementlar uchun asosiy xususiyatlar:

• order: Flex elementning vizual tartibini belgilaydi (standart 0).
• flex-grow: Flex element boshqa elementlarga nisbatan qancha o‘sishi mumkinligini belgilaydi (standart 0).
• flex-shrink: Flex element boshqa elementlarga nisbatan qancha kamayishi mumkinligini belgilaydi (standart 1).
• flex-basis: Bo‘sh joy taqsimlanishidan oldin flex elementning boshlang‘ich o‘lchamini belgilaydi (standart auto).
• align-self: Maxsus element uchun kross o‘q bo‘ylab joylashishni qayta belgilaydi.

Misol:

.container {
  display: flex;
  justify-content: center; /* Asosiy o‘q bo‘ylab markazlashtirish */
  align-items: center; /* Kross o‘q bo‘ylab markazlashtirish */
  height: 200px;
  border: 1px solid black;
}

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

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Bu elementlarni osongina markazlashtirish, moslashuvchan tarmoqlar yaratish va elementlar o‘rtasidagi bo‘shliqni boshqarish imkonini beradi.