Flexbox xüsusiyyətləri necə təyin edilir?

Container üçün (display: flex və ya display: inline-flex tətbiq olunan element) və onun birbaşa törəmələri üçün (container daxilindəki elementlər) xüsusiyyətlər təyin olunur.

Container üçün xüsusiyyətlər:

display: Elementin flex-container olduğunu müəyyən edir. Mümkün dəyərlər: flex (blok) və inline-flex (sətir).
flex-direction: Əsas oxun istiqamətini təyin edir, burada flex-elementlərin yerləşdirilməsi baş verir. Mümkün dəyərlər: row (varsayılan, soldan sağa), row-reverse (sağdan sola), column (yuxarıdan aşağı), column-reverse (aşağıdan yuxarı).
flex-wrap: Flex-elementlərin yeni sətirə keçməsini idarə edir, əgər onlar konteynerin sərhədlərindən çıxarsa. Mümkün dəyərlər: nowrap (varsayılan, sətir dəyişməz), wrap (yeni sətirə keçid), wrap-reverse (əks istiqamətdə yeni sətirə keçid).
justify-content: Flex-elementləri əsas ox boyunca hizalayır. Mümkün dəyərlər: flex-start (konteynerin başlanğıcı), flex-end (sonu), center, space-between (bərabər aralıqlarla, ilk başlanğıcda, son sonunda), space-around (hər elementin ətrafında bərabər boşluq).
align-items: Flex-elementləri dik ox boyunca hizalayır. Mümkün dəyərlər: stretch (varsayılan, elementləri konteynerin hündürlüyünə görə uzadır), flex-start (başlanğıc), flex-end (son), center, baseline (mətnin əsas xəttinə uyğun).
align-content: Flex sətirlərini dik ox boyunca hizalayır (əgər flex-wrap istifadə olunursa). Yalnız bir neçə sətir olduqda təsir edir. Mümkün dəyərlər: stretch, flex-start, flex-end, center, space-between, space-around.
gap, row-gap, column-gap: Flex-elementlər arasında məsafəni təyin edir.

Elementlər üçün (birbaşa törəmələr):

order: Elementin konteyner daxilində yerləşdirilmə ardıcıllığını müəyyən edir. Varsayılan olaraq, bütün elementlər order: 0-ə malikdir. Kiçik order dəyərinə malik elementlər əvvəl yerləşir.
flex-grow: Elementin digər elementlərlə müqayisədə sərbəst sahə varsa, nə qədər böyüyəcəyini müəyyən edir. Varsayılan 0 (böyüməz).
flex-shrink: Sərbəst sahə yoxdursa, elementin nə qədər kiçiləcəyini müəyyən edir. Varsayılan 1 (kiçilir).
flex-basis: Sərbəst sahə paylanmadan əvvəl elementin ilkin ölçüsünü təyin edir. Piksel, faiz və ya auto ola bilər. Varsayılan auto.
flex: flex-grow, flex-shrink və flex-basis üçün qısaldılmış xüsusiyyətdir. Məsələn, flex: 1 1 auto;.
align-self: Bu element üçün align-items dəyərini yenidən təyin edir. Mümkün dəyərlər: auto, stretch, flex-start, flex-end, center, baseline.

Nümunə:

.flex-container {
  display: flex; /* Elementi flex-konteyner edir */
  flex-direction: row; /* Elementləri sırayla yerləşdirir */
  justify-content: center; /* Əsas ox boyunca mərkəzləşdirir */
  align-items: center; /* Dik ox boyunca mərkəzləşdirir */
  gap: 10px; /* Elementlər arasında məsafə */
}

.flex-item {
  flex-grow: 1; /* Element böyüyə bilər */
  flex-basis: 100px; /* İlkin ölçü */
}

.special-item {
  order: -1; /* Bu element ilk yerləşəcək */
  align-self: flex-end; /* Bu element üçün dik ox hizalanmasını dəyişir */
}