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 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 genellikle Grid 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 çizgilerle yerleştirir. 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. 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.

Özellikleri uygulama

FlexBox özelliklerini iki şekilde uygulayabilirsiniz:

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

Container ö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 gelen ek alanı 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 ana boyuttan alması gereken alan açığı payı alignSelf: Çapraz boyuttan elde edilen ekstra alanın bu öğeye nasıl dağıtılacağı. alignItems özelliğini 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 ilk 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, başlangıç boyutuna gap eklendiğinde 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 öğ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şlangıç bölümüne bakın.