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.

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) 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.

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:

Ç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.
Çocukları sıralama: Varsa çocukları order değerlerine göre sıralayın.
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).
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.
Öğ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.

Uyarlamalı yapılması ve yapılmaması gerekenler

Başlama