Kapsayıcı davranışını ayarlama

FlexBox kapsayıcısının davranışını yapılandırmak için bir FlexBoxConfig bloğu oluşturun ve config parametresini kullanarak sağlayın.

FlexBox(
    config = {
        direction(FlexDirection.Column)
        wrap(FlexWrap.Wrap)
        alignItems(FlexAlignItems.Center)
        alignContent(FlexAlignContent.SpaceAround)
        justifyContent(FlexJustifyContent.Center)
        gap(16.dp)
    }
) { // child items
}FlexBoxSnippets.kt

Düzen yönünü, sarmalama davranışını, hizalamayı ve öğeler arasındaki boşlukları tanımlamak için FlexBoxConfig simgesini kullanın.

Düzen yönü

direction işlevi, öğelerin yerleştirileceği yönü belirleyen ana ekseni ayarlar. Aşağıdaki değerleri kabul eder:

Row (varsayılan): Ana ekseni yatay olarak ayarlar. Soldan sağa yerel ayarlarda bu soldan sağa, sağdan sola yerel ayarlarda ise sağdan sola olur.
RowReverse: Row yönünü tersine çevirir.
Column: Ana ekseni dikey, yukarıdan aşağıya olacak şekilde ayarlar.
ColumnReverse: Column yönünü tersine çevirir.

Öğeleri hizalama ve fazla alanı dağıtma

Aşağıdaki bölümlerde, öğelerin nasıl hizalanacağı ve ana eksen ile çapraz eksen boyunca fazladan alanın nasıl dağıtılacağı açıklanmaktadır.

Ana eksen boyunca

Öğeleri ana eksen boyunca dağıtmak için justifyContent özelliğini kullanın. Aşağıdaki tabloda, yön Row olduğunda nasıl bir davranış sergilendiği gösterilmektedir.


`Start`
`Center`
`End`
`SpaceBetween`
`SpaceAround`
`SpaceEvenly`

Çapraz eksen boyunca

Öğeleri tek bir satırda çapraz eksen boyunca hizalamak için alignItems kullanın. Bu davranış, alignSelf değiştiricisi kullanılarak tek tek öğeler tarafından geçersiz kılınabilir.

Aşağıdaki resimlerde, yön Row olduğunda nasıl bir davranış sergilendiği gösterilmektedir:


	`Start`	`End`	`Center`	`Stretch`	`Baseline`

Satırları çapraz eksene hizalamak ve satırlar arasındaki boşluğu eşit olarak dağıtmak için alignContent simgesini kullanın. Bu özellik yalnızca birden fazla satır olduğunda geçerlidir (kaydırma etkinleştirilmişse). Aşağıdaki resimlerde, yön Row olduğunda nasıl bir davranış sergilendiği gösterilmektedir:


	`Start`	`End`	`Center`	`Stretch`	`SpaceBetween`	`SpaceAround`

Öğeleri sarmalama

Sarma, FlexBox kapsayıcının çok satırlı olmasına olanak tanır ve sığmayan öğeleri çapraz eksen boyunca yeni bir satıra veya sütuna taşır. wrap kullanarak sarmalama davranışını yapılandırın.

`FlexWrap` değer	`Row` yönünü kullanan örnek
`NoWrap` (varsayılan): Öğelerin kaydırılmasını engeller. Ana boyut yetersizse öğeler taşar.
`Wrap`: Bir öğe (ve boşluk) için yeterli alan olmadığında çapraz eksen yönünde yeni bir satır oluşturulur. Örneğin, yön `Row` ise aşağıya yeni bir satır eklenir.
`WrapReverse`: `Wrap` ile aynıdır. Tek fark, yeni satırın çapraz eksenin ters yönünde eklenmesidir. Örneğin, yön `Row` ise yukarıya yeni bir satır eklenir.

Aşağıdaki örnekte FlexBox sarmalama algoritmasının nasıl çalıştığı gösterilmektedir. FlexBox kapsayıcısının ana boyutu 100dp, wrap değeri FlexWrap.Wrap olarak ayarlanmış ve 8dp boşluğu var. Bu listede sırasıyla basis 20dp, 40dp ve 50dp içeren üç öğe yer alıyor.

Kuyrukta 100dp boş yer var. 1. çocuk 20dp. Yer olduğu için 1. çocuk sıraya yerleştirilir.

FlexBox kapsayıcısına yerleştirilen ilk öğe. — **Şekil 1.** `FlexBox` kapsayıcısına yerleştirilen ilk öğe.

Kuyrukta 80dp boş yer var. Açık 8dp. 2. çocuk 40dp. Gerekli alan 48dp. Boşluk olduğundan, boşluk ve 2. Çocuk sıraya yerleştirilir.

Kuyrukta 32dp boş yer var. Açık 8dp. 3. çocuk 50dp. Gerekli alan 58dp. Mevcut satırda yeterli alan olmadığından 3. çocuk yeni bir satıra yerleştirilir.

**Şekil 3.** Üçüncü öğe, ilk satıra sığmadığı için yeni bir satıra yerleştirildi.

Öğeler arasına boşluk ekleme

rowGap ve columnGap kullanarak satırlar ve sütunlar arasına boşluk ekleyin. Bu, alt öğelere aralık değiştiriciler eklemeyi önlemek için kullanışlıdır.