FlexBox

FlexBox, öğeleri tek bir yönde düzenleyen bir kapsayıcıdır. Kullanılabilir alanı en iyi şekilde doldurmak için öğeler arasındaki alanı yeniden boyutlandırabilir, kaydırabilir, hizalayabilir ve dağıtabilir. Farklı boyutlardaki öğeler ve kullanılabilir alan değiştiğinde öğeleri yeniden boyutlandırmak için kullanışlı bir düzendir.

FlexBox ile şunları yapabilirsiniz:

  • Öğelerin, kullanılabilir alanı doldurmak için nasıl büyüyüp küçüleceğini kontrol etme
  • Öğeler için yeterli alan olmadığında bunları yeni satırlara veya sütunlara kaydırma
  • Kullanışlı hazır ayarları kullanarak öğeler arasındaki boşluğu dağıtma

FlexBox ne zaman kullanılır?

FlexBox genellikle genel ekran düzeni içinde az sayıda öğeyi görüntülemek için kullanılır. Genel ekran düzeni için Grid genellikle daha iyi bir seçimdir. FlexBox, öğelerin geç yüklenmesini desteklemez. Çok sayıda öğeyi görüntülemek için geç yüklenen listeleri ve ızgaraları kullanın. Öğeleri sarmalamanız gerekiyorsa FlowRow ve FlowColumn yerine FlexBox öğesini kullanın.

Terminoloji ve kavramlar

FlexBox, öğelerini yatay veya dikey çizgiler halinde düzenler. Bu çizgilerin yönü ana ekseni oluşturur. Ana eksene 90 derece olan eksen çapraz eksendir. Ana eksen boyunca FlexBox uzunluğu, ana boyut olarak bilinir. Karşılık gelen çapraz eksen uzunluğu çapraz boyut olarak bilinir. Bu boyutlar ve eksenler, FlexBox'nın davranışının temelini oluşturur.

Yatay ana eksen ve dikey çapraz eksen içeren FlexBox.
Şekil 1. FlexBox yönü Row olduğunda eksenler ve boyutlar.
Dikey ana eksen ve yatay çapraz eksen içeren FlexBox.
Şekil 2. FlexBox yönü Column olduğunda eksenler ve boyutlar.

Özellikleri uygulama

FlexBox özelliklerini iki şekilde uygulayabilirsiniz:

  • FlexBox(config) kullanarak FlexBox kapsayıcısına
  • Modifier.flex kullanılarak FlexBox içindeki bir öğeye

Kapsayıcı özellikleri (config)

Öğe özellikleri (Modifier.flex)
  • direction: öğe düzeninin yönü
  • wrap: Ana boyut yetersizse öğelerin sarmalanıp sarmalanmayacağı
  • justifyContent - öğeleri ana eksen boyunca nasıl dağıtacağınız
  • alignItems - Öğeleri çapraz eksen boyunca nasıl hizalayacağınız
  • alignContent - Birden fazla satır olduğunda çapraz boyuttan kalan boşluğu dağıtma
  • rowGap / columnGap: Öğeler ve satırlar arasına boşluk ekler.

Bu özellikler hakkında daha fazla bilgi için Kapsayıcı davranışını ayarlama başlıklı makaleyi inceleyin.
  • basis - Ana boyuttan gelen ek alan dağıtılmadan önceki öğenin boyutu
  • grow: Bu öğenin ana boyuttan alması gereken ek alan payı
  • shrink: Bu öğenin alması gereken ana boyuttan kaynaklanan alan açığı payı
  • alignSelf - Çapraz boyuttan gelen ekstra alanın bu öğeye nasıl dağıtılacağı, alignItems değerini geçersiz kılar
  • order - Düzen sırasını kontrol eder.

Bu özellikler hakkında daha fazla bilgi için Öğe davranışını ayarlama başlıklı makaleyi inceleyin.

FlexBox düzen algoritmasını anlama

FlexBox'nın en güçlü özelliklerinden biri, alt öğelerini kendisine ayrılan alana en iyi şekilde uyacak şekilde yeniden boyutlandırabilmesidir. FlexBox özelliğinin bunu nasıl yaptığını anlamak, kullanıcı arayüzünüzü olası tüm boyutlar için optimize etmek üzere FlexBox özelliklerini ayarlamanıza yardımcı olabilir.

FlexBox'ın düzen algoritması şu şekilde çalışır:

  1. Çocuk temel boyutunu hesaplama: Ek alan dağıtılmadan önce ana eksen boyunca başlangıç boyutunu hesaplamak için çocuğun basis değerini kullanın.

  2. Çocukları sıralama: Varsa çocukları order değerlerine göre sıralayın.

  3. Satır oluşturma: Her alt öğe için ilk boyutu artı gap değerinin, mevcut satırda kalan alana sığıp sığmadığını kontrol edin. Bu durumda, çocuğu sıraya yerleştirin. Aksi takdirde, sarma etkinse öğeyi yeni bir satıra yerleştirin veya öğeyi, taşacağı mevcut satıra yerleştirin (öğe, kapsayıcının kenarı tarafından kısmen gizlenir).

  4. Ana eksendeki öğeleri hizalama veya yeniden boyutlandırma: Her satır için öğeleri yeniden boyutlandırarak veya hizalayarak öğelere ekstra alan dağıtın ya da öğeler arasında alan dağıtın.

  5. Öğeleri çapraz eksende hizalama veya yeniden boyutlandırma: Her satır için öğeleri ve satırları genişleterek veya hizalayarak öğelere ya da satırlara fazladan boşluk dağıtın.

FlexBox kavramlarını öğrendiğinize göre temel bir FlexBox oluşturmak için Başlarken başlıklı makaleyi inceleyin.