Meet FlexBox: The Powerful New Layout System for Compose

  

Jetpack Compose continues to evolve, and with the introduction of the new FlexBox layout, we finally have a powerful, flexible way to design adaptive UIs — inspired by the CSS Flexbox model.

• If you’ve ever used Row, Column, or FlowRowYou’ll feel right at home. FlexBox acts as a superset, combining their capabilities while providing granular control over alignment, wrapping, and item distribution.
• Until now, we had to choose between rigid layouts (Row/Column) or more dynamic ones (FlowRow/FlowColumn).
• FlexBox merges the best of both worlds — flexibility and simplicity.

What Is FlexBox?

• Composable brings the concept of flexible layouts from the web into Jetpack Compose.
• Arranges its children dynamically, allowing them to grow, shrink, or wrap based on available space and configuration.

FlexBox API

🏗️ Building blocks and their roles.

FlexBox

The main composable responsible for arranging children.

FlexBox(
    config = {
        direction(FlexDirection.Row)
        wrap(FlexWrap.Wrap)
        justifyContent(FlexJustifyContent.SpaceBetween)
        alignItems(FlexAlignItems.Center)
        gap(8.dp)
    },
    modifier = Modifier
        .border(1.dp, Color.Black)
) {
    Text(
        "Item 1",
        Modifier
            .flex {
                grow(1f)
            }
            .background(color = randomColor())
            .border(1.dp, Color.Black)
    )
    Text(
        "Item 2",
        Modifier
            .flex {
                basis(80.dp)
            }
            .background(color = randomColor()))
}

FlexBoxConfig

Configures the container’s layout behavior — direction, wrapping, justification, alignment, and spacing.

Key parameters:

• direction: Controls the main axis (Row, Column).
• wrap: Determines if items flow onto new lines.
  Here we have 3 options: Wrap, NoWrap, WrapReverse
• justifyContent: Distributes space along the main axis(start, end, etc).
• alignItems: Defines how items align on the cross-axis(start, end, etc).
• alignContent: Controls how multiple lines are distributed along the cross-axis.

This applies only when the wrap is FlexWrap.Wrap or FlexWrap.WrapReverse and there are multiple lines of items.

• gap: Adds spacing between items (horizontal and vertical).

Modifier.flex

• Used to fine-tune each child’s flexibility and order within the layout.

Supported parameters:

• grow: Defines how much an item can expand relative to others.
• shrink: Dictates how an item shrinks to avoid overflow.
• basis: Sets the item’s initial size before it grows or shrinks.
• order : Determines the display order within the FlexBox.
• alignSelf: Overrides container alignment for a specific child.

Code Samples

• FlexBox + Row + Flex + Grow + Basis

@Composable
fun FlexBoxRowFlexGrow() {
    FlexBox(
        modifier = Modifier
            .fillMaxWidth()
            .border(1.dp, Color.Black)
    ) {
        Box(
            modifier =
                Modifier
                    .width(50.dp)
                    .height(50.dp)
        ) {
            Text(text = "50dp")
        }
        Box(
            modifier =
                Modifier
                    .width(50.dp)
                    .height(50.dp)
                    .flex {
                        grow(1f)
                        basis(50.dp)
                    }
        ) {
            Text(text = "grow=1")
        }
        Box {
            Text(text = "50dp")
        }
    }
}

• FlexBox + Column + FlexGrow

@Composable
private fun FlexBoxColumnFlexGrowSample() {
    FlexBox(
        config = { direction(FlexDirection.Column) },
        modifier = Modifier
            .height(300.dp)
            .border(1.dp, Color.Black),
    ) {
        Box {
            Text(text = "50dp")
        }
        Box(
            modifier =
                Modifier
                    .height(50.dp)
                    .flex { grow(1f) }
        ) {
            Text(text = "grow=1")
        }
        Box {
            Text(text = "50dp")
        }
    }
}

• FlexBox + RowWrap

@Composable
private fun FlexBoxRowWrapDemo() {
    FlexBox(
        config = {
            direction(FlexDirection.Row)
            wrap(FlexWrap.Wrap)
        }
    ) {
        repeat(10) {
            Box(
                modifier = Modifier
                        .size(50.dp)
            ) {
                Text(text = "$it")
            }
        }
    }
}

• FlexBox + RowReverse

@Composable
private fun FlexBoxRowReverse() {
    FlexBox(
        config = { direction(FlexDirection.RowReverse) }, 
        modifier = Modifier.fillMaxWidth()
    ) {
        repeat(4) {
            Box(
                modifier = Modifier.size(50.dp)
            ) {
                Text(text = "$it")
            }
        }
    }
}

References

• FlexBox | Jetpack Compose | Android Developers
• Compose Foundation | Jetpack | Android Developers

Stay in touch

https://www.linkedin.com/in/navczydev/

• JavaScript is not available.
• navczydev – Overview
• navczydev.bsky.social

---

Meet FlexBox: The Powerful New Layout System for Compose was originally published in ProAndroidDev on Medium, where people are continuing the conversation by highlighting and responding to this story.