Google, içerikleri tercih ettiğiniz dile çevirmek için yapay zeka teknolojisini kullanır. Yapay zeka çevirilerinde hata olabilir.

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 bu bloğu 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 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 dillerde bu soldan sağa, sağdan sola dillerde 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 ek boşlukları dağıtma

Aşağıdaki bölümlerde, öğelerin nasıl hizalanacağı ve ana ile çapraz eksenler boyunca ek 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 davranış gösterilmektedir.


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

Çapraz eksen boyunca

Öğeleri tek bir satırda çapraz eksen boyunca hizalamak için alignItems özelliğini 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 davranış gösterilmektedir:


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

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


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

Öğeleri sarmala

Sarma, FlexBox kapsayıcısının çok satırlı olmasını sağlayarak 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ğeri	Yön `Row` kullanan örnek
`NoWrap` (varsayılan): Öğelerin kaydırılmasını engeller. Ana boyut yetersizse öğeler taşar.
`Wrap`: Bir öğe için yeterli alan olmadığında (ve boşluk) çapraz eksen yönünde yeni bir satır oluşturulur. Örneğin, yön `Row` ise alta yeni bir satır eklenir.
`WrapReverse`: `Wrap` ile aynıdır ancak yeni satır, çapraz eksenin ters yönünde eklenir. Örneğin, yön `Row` ise yukarıya yeni bir satır eklenir.

Aşağıdaki örnekte FlexBox sarmalama algoritmasının işleyiş şekli gösterilmektedir. FlexBox kapsayıcısının ana boyutu 100dp, wrap değeri FlexWrap.Wrap ve boşluk değeri 8dp. Sırasıyla basis 20dp, 40dp ve 50dp değerlerine sahip üç öğe içerir.

Sırada 100dp kişilik 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.

Sırada 80dp kişilik yer var. Fark 8dp. 2. çocuk 40dp. Gerekli alan 48dp. Boşluk olduğu için boşluk ve 2. alt öğe satıra yerleştirilir.

İlk öğeden sonra FlexBox kapsayıcısına yerleştirilen ikinci öğe. — **Şekil 2.** İlk öğeden sonra `FlexBox` kapsayıcısına yerleştirilen ikinci öğe.

Sırada 32dp kişilik yer var. Fark 8dp. 3. çocuk 50dp. Gerekli alan 58dp. Mevcut satırda yeterli alan olmadığından 3. alt öğe yeni bir satıra yerleştirilir.

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

Öğeler arasına boşluk ekleme

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