Get started with FlexBox

This page describes how to implement basic FlexBox layouts.

Set up project

1. Add the androidx.compose.foundation.layout library to your project's lib.versions.toml.

   [versions]
   compose = "1.11.0-alpha06"
   
   [libraries]
   androidx-compose-foundation-layout = { group = "androidx.compose.foundation", name = "foundation-layout", version.ref = "compose" }
   

2. Add the library dependency to your app's build.gradle.kts.

   dependencies {
       implementation(libs.androidx.compose.foundation.layout)
   }
   

Create basic FlexBox layouts

Example 1: FlexBox lays out two Text elements that are centrally aligned.

FlexBox(
    config = {
        direction = FlexDirection.Column
        alignItems = FlexAlignItems.Center
    }
) {
    Text(text = "Hello", fontSize = 48.sp)
    Text(text = "World!", fontSize = 48.sp)
}
FlexBoxSnippets.kt

Example 2: FlexBox wraps five items onto two rows and grows them unequally to fill the available space on each row. There is an 8.dp gap, both vertically and horizontally, between the items.

FlexBox(
    config = {
        wrap = FlexWrap.Wrap
        gap(8.dp)
    }
) {
    RedRoundedBox()
    BlueRoundedBox()
    GreenRoundedBox(modifier = Modifier.width(350.dp).flex { grow = 1.0f })
    OrangeRoundedBox(modifier = Modifier.width(200.dp).flex { grow = 0.7f })
    PinkRoundedBox(modifier = Modifier.width(200.dp).flex { grow = 0.3f })
}
FlexBoxSnippets.kt

To learn more about FlexBox behavior, see Set container behavior and Set item behavior.