Flexbox xususiyatlarini qanday belgilash mumkin…

Kontaynerga (display: flex yoki display: inline-flex qoʻllaniladigan elementga) va uning toʻgʻridan-toʻgʻri vorislari (kontayner ichidagi elementlar) uchun xususiyatlar oʻrnatiladi.

Kontayner uchun xususiyatlar:

display: Element flex kontayner boʻlishini belgilaydi. Mumkin boʻlgan qiymatlar: flex (blok), va inline-flex (qator ichida).
flex-direction: Flex elementlarining asosiy o‘qi yo‘nalishini belgilaydi. Mumkin boʻlgan qiymatlar: row (standart, chapdan o‘ngga), row-reverse (o‘ngdan chapga), column (yuqoridan pastga), column-reverse (pastdan yuqoriga).
flex-wrap: Flex elementlar yangi satrga oʻtishini yoki oʻtmasligini nazorat qiladi. Mumkin boʻlgan qiymatlar: nowrap (standart, oʻtmasdan), wrap (yangi satrga oʻtish), wrap-reverse (qarama-qarshi tartibda oʻtish).
justify-content: Flex elementlarni asosiy o‘q bo‘ylab joylashtiradi. Mumkin boʻlgan qiymatlar: flex-start (boshlanish), flex-end (oxiri), center, space-between (teng bo‘sh joylar bilan), space-around (har bir element atrofida teng bo‘sh joy).
align-items: Flex elementlarni kesma o‘q bo‘ylab joylashtiradi. Mumkin boʻlgan qiymatlar: stretch (standart, elementlarni balandlikka cho‘zadi), flex-start, flex-end, center, baseline (matnning asosiy chizig‘iga moslashtirish).
align-content: Flex satrlarini kesma o‘q bo‘ylab joylashtiradi (agar flex-wrap ishlatilgan bo‘lsa). Faqat bir satr bo‘lsa, ta’sir qilmaydi. Mumkin boʻlgan qiymatlar: stretch (standart), flex-start, flex-end, center, space-between, space-around.
gap, row-gap, column-gap: Elementlar oʻrtasidagi masofani belgilaydi.

Elementlar uchun xususiyatlar:

order: Elementning kontayner ichidagi tartibini belgilaydi. Standartda, barcha elementlar uchun order: 0. Kamroq order qiymatiga ega elementlar avval joylashadi.
flex-grow: Bo‘sh joy bo‘lsa, boshqa elementlarga nisbatan qancha marta oʻsishi mumkinligini belgilaydi. Standart, 0 (o‘smaydi).
flex-shrink: Joy yetishmasligi holatida qancha marta kichrayishi mumkinligini belgilaydi. Standart, 1 (kichrayadi).
flex-basis: Bo‘sh joy taqsimlanishidan oldin elementning boshlang‘ich o‘lchamini belgilaydi. Piksel, foiz yoki auto bo‘lishi mumkin. Standart, auto.
flex: flex-grow, flex-shrink va flex-basis uchun qisqartma. Masalan, flex: 1 1 auto;.
align-self: align-items qiymatini alohida element uchun o‘zgartiradi. Mumkin boʻlgan qiymatlar: auto (ota-ona align-items qiymatini ishlatadi), stretch, flex-start, flex-end, center, baseline.

Misol:

.flex-container {
  display: flex; /* Elementni flex kontaynerga aylantiradi */
  flex-direction: row; /* Elementlarni qatorga joylashtiradi */
  justify-content: center; /* Asosiy o‘q bo‘ylab markazga joylashtiradi */
  align-items: center; /* Kesma o‘q bo‘ylab markazga joylashtiradi */
  gap: 10px; /* Elementlar orasidagi masofani belgilaydi */
}

.flex-item {
  flex-grow: 1; /* Element o‘sishi mumkin */
  flex-basis: 100px; /* Boshlang‘ich o‘lcham */
}

.special-item {
  order: -1; /* Bu element birinchi bo‘lishi uchun */
  align-self: flex-end; /* Bu element uchun kesma joylashishni o‘zgartiradi */
}

Flexbox xususiyatlarini qanday belgilash mumkin?