FlexBox

FlexBox, öğeleri tek bir yönde düzenleyen bir kapsayıcıdır. Mevcut alanı en iyi şekilde doldurmak için öğeleri yeniden boyutlandırabilir, sarmalayabilir, hizalayabilir ve öğeler arasındaki boşluğu 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
• Yeterli alan olmadığında öğeleri yeni satırlara veya sütunlara sığdır
• 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 tembel listeleri ve ızgaraları kullanın. Öğeleri sarmalamanız gerekiyorsa FlowRow ve FlowColumn yerine FlexBox kullanın.

Terminoloji ve kavramlar

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

Özellikleri uygulama

FlexBox özelliklerini iki şekilde uygulayabilirsiniz:

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

Kapsayıcı özellikleri (config)

Öğe özellikleri (Modifier.flex)

direction: Öğe düzeni yönü wrap: Ana boyut yetersizse öğelerin sarmalanıp sarmalanmayacağı justifyContent: Öğelerin ana eksen boyunca nasıl dağıtılacağını belirler. alignItems: Öğeleri çapraz eksen boyunca hizalama alignContent: Birden fazla satır olduğunda çapraz boyuttaki ek alanın nasıl dağıtılacağını belirler. 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 önce öğenin boyutu grow: Bu öğenin ana boyuttan alması gereken ekstra alanın payı shrink: Bu öğenin ana boyuttan alması gereken alan açığı payı alignSelf: Çapraz boyuttan bu öğeye ekstra alanın nasıl dağıtılacağını belirler, 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 bölümüne bakın.

FlexBox düzen algoritmasını anlama

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

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

1. Alt öğenin temel boyutunu hesaplama: Herhangi bir ek alan dağıtılmadan önce ana eksen boyunca ilk boyutunu hesaplamak için alt öğenin basis değerini kullanın.

2. Alt öğeleri sıralama: Alt öğeleri, varsa order değerlerine göre sıralayın.

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

4. Öğeleri ana eksende hizalama veya yeniden boyutlandırma: Her satırda, öğeleri yeniden boyutlandırarak veya hizalayarak fazladan boşluğu öğelere veya öğelerin arasına dağıtın.

5. Çapraz eksendeki öğeleri hizalama veya yeniden boyutlandırma: Her satır için, öğeleri ve satırları uzatarak veya hizalayarak öğeler ve satırlar arasında fazladan boşluk bırakın.

FlexBox kavramlarını öğrendiğinize göre temel bir FlexBox oluşturmak için Başlangıç bölümüne bakın.