Flexbox özellikleri nasıl ayarlanır?

Flex konteynerine (display: flex veya display: inline-flex uygulanmış öğe) ve onun doğrudan alt öğelerine (konteyner içindeki öğelere) özellikler atanır.

Konteyner için özellikler:

display: Öğenin bir flex konteyneri olduğunu belirler. Olası değerler: flex (blok) ve inline-flex (satır içi).
flex-direction: Flex öğelerinin yerleştirildiği ana eksenin yönünü belirler. Olası değerler: row (varsayılan, soldan sağa), row-reverse (sağdan sola), column (üstten alta), column-reverse ( alttan üste).
flex-wrap: Flex öğelerinin, sınırları aşarsa yeni satıra geçip geçmeyeceğini kontrol eder. Olası değerler: nowrap (varsayılan, sarmalama yok), wrap (sarmalayarak yeni satıra geçer), wrap-reverse (ters sırayla sarmalayarak yeni satıra geçer).
justify-content: Flex öğelerini ana eksen boyunca hizalar. Olası değerler: flex-start (konteynerin başlangıcı), flex-end (konteynerin sonu), center, space-between (arasında eşit boşluk, ilk başta, son sonda), space-around (her öğe etrafında eşit boşluk).
align-items: Flex öğelerini çapraz eksende hizalar. Olası değerler: stretch (varsayılan, öğeleri yüksekliğe göre uzatır), flex-start (başlangıç), flex-end (bitiş), center, baseline (metnin temel çizgisine hizala).
align-content: Flex satırlarını çapraz eksende hizalar ( flex-wrap kullanıldığında). Tek satır varsa etkili değildir. Olası değerler: stretch (varsayılan), flex-start, flex-end, center, space-between, space-around.
gap, row-gap, column-gap: Ana ve çapraz eksende öğeler arasındaki mesafeyi belirler.

Öğeler için özellikler (konteynerin doğrudan alt öğeleri):

order: Öğenin konteyner içindeki sırasını belirler. Varsayılan olarak, tüm öğeler order: 0'a sahiptir. Daha küçük order değeri olanlar önce gelir.
flex-grow: Boş alan varsa, diğer öğelere göre ne kadar büyüyebileceğini belirler. Varsayılan 0 (büyümez).
flex-shrink: Alan yetersizse, ne kadar küçülebileceğini belirler. Varsayılan 1 (küçülür).
flex-basis: Boş alan dağıtılmadan önce öğenin başlangıç boyutunu belirler. Piksel, yüzde veya auto olabilir. Varsayılan auto.
flex: flex-grow, flex-shrink ve flex-basis için kısaltma özelliği. Örneğin, flex: 1 1 auto;.
align-self: Belirli bir öğe için align-items değerini geçersiz kılar. Olası değerler: auto (ebeveynin align-items değerini kullanır), stretch, flex-start, flex-end, center, baseline.

Örnek:

.flex-container {
  display: flex; /* Öğeyi flex konteyner yapar */
  flex-direction: row; /* Öğeleri satır halinde diz */
  justify-content: center; /* Öğeleri ana eksende ortala */
  align-items: center; /* Öğeleri çapraz eksende ortala */
  gap: 10px; /* Öğeler arasındaki mesafeyi ayarla */
}

.flex-item {
  flex-grow: 1; /* Öğenin büyüyebileceğini belirtir */
  flex-basis: 100px; /* Öğenin başlangıç boyutu */
}

.special-item {
  order: -1; /* Bu öğe ilk sırada yer alacak */
  align-self: flex-end; /* Bu öğe için çapraz hizalamayı değiştir */
}