FlexBox

FlexBox, öğeleri tek bir yönde yerleştiren 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
• Öğeleri, yeterli alan olmadığında yeni satırlara veya sütunlara kaydırma
• Kullanışlı hazır ayarları kullanarak öğeler arasındaki fazla alanı dağıtma

FlexBox ne zaman kullanılır?

FlexBox genellikle genel bir ekran düzeni içinde az sayıda öğeyi göstermek için kullanılır. Genel ekran düzeni için Grid genellikle daha iyi bir seçenektir. FlexBox, öğelerin geç yüklenmesini desteklemez. Çok sayıda öğeyi görüntülemek için tembel listeler 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ğuna ana boyut adı verilir. Buna 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) kullanılarak FlexBox kapsayıcısına
• FlexBox içindeki bir öğeye Modifier.flex kullanılarak

Container özellikleri (config)

Öğe özellikleri (Modifier.flex)

direction - öğe düzeni 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 ekstra alan payı shrink: Bu öğenin ana boyuttan alması gereken alan açığı payı alignSelf: Çapraz boyuttan elde edilen 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'nın 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ı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 öğenin ilk boyutu ile gap değerinin toplamının, mevcut satırda kalan alana sığıp sığmadığını kontrol edin. Bu durumda, çocuğu sıraya yerleştirin. Aksi takdirde, sarma 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. Ana eksendeki öğeleri hizalama veya yeniden boyutlandırma: Her satır için öğeleri yeniden boyutlandırarak veya hizalayarak öğeler arasında veya öğelere fazladan boşluk 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 öğeler ve satırlar arasında ya da öğelere ve 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.