flex ne demek?

Flexbox (Esnek Kutu) Nedir?

Flexbox, CSS'de karmaşık düzenleri kolayca oluşturmak için tasarlanmış bir düzen modelidir. Özellikle kapsayıcı içindeki öğelerin boyutlandırılması, hizalanması ve sıralanması konusunda büyük kolaylık sağlar. Geleneksel CSS düzen yöntemlerine göre daha esnek ve dinamiktir.

Temel Kavramlar:

• Esnek Kapsayıcı (Flex Container): display: flex veya display: inline-flex özelliği verilerek bir HTML öğesi esnek kapsayıcı haline getirilir. Bu kapsayıcı, içindeki doğrudan çocuk öğelerini esnek öğe (flex item) olarak yönetir.
  • Esnek Kapsayıcı
• Esnek Öğeler (Flex Items): Esnek kapsayıcının içindeki doğrudan çocuk öğelerdir. Bu öğelerin düzeni ve davranışı, kapsayıcıdaki flexbox özellikleriyle kontrol edilir.
  • Esnek Öğeler
• Ana Eksen (Main Axis): Esnek öğelerin yerleştirildiği birincil eksendir. Varsayılan olarak yataydır, ancak flex-direction özelliği ile değiştirilebilir.
  • Ana Eksen
• Çapraz Eksen (Cross Axis): Ana eksene dik olan eksendir. Ana eksen yataysa, çapraz eksen dikeydir.
  • Çapraz Eksen

Önemli Flexbox Özellikleri:

• flex-direction: Ana eksenin yönünü belirler (row, column, row-reverse, column-reverse).
  • flex-direction
• justify-content: Esnek öğeleri ana eksen boyunca hizalar (flex-start, flex-end, center, space-between, space-around, space-evenly).
  • justify-content
• align-items: Esnek öğeleri çapraz eksen boyunca hizalar (flex-start, flex-end, center, baseline, stretch).
  • align-items
• align-content: Çok satırlı (flex-wrap: wrap) bir esnek kapsayıcıdaki satırları çapraz eksen boyunca hizalar.
  • align-content
• flex-wrap: Esnek öğelerin tek satırda mı yoksa birden fazla satırda mı yer alacağını belirler (nowrap, wrap, wrap-reverse).
  • flex-wrap
• flex-grow: Esnek öğenin kalan boş alanı ne kadar dolduracağını belirler.
  • flex-grow
• flex-shrink: Esnek öğenin, kapsayıcıya sığmadığında ne kadar küçüleceğini belirler.
  • flex-shrink
• flex-basis: Esnek öğenin başlangıç boyutunu belirler.
  • flex-basis
• order: Esnek öğelerin sıralamasını değiştirir.
  • order
• align-self: Tek bir esnek öğenin çapraz eksen boyunca hizalanmasını kontrol eder. align-items özelliğini geçersiz kılar.
  • align-self

Flexbox, web geliştiricilerinin duyarlı ve karmaşık düzenler oluşturmasına olanak tanır. Mobil öncelikli (mobile-first) tasarım yaklaşımı için idealdir.