FlexBox

SimpleFlexBox

@Composable
@OptIn(ExperimentalFlexBoxApi::class)
fun SimpleFlexBox() {
    // FlexBox defaults to a Row-like layout (FlexDirection.Row).
    // The children will be laid out horizontally.
    FlexBox(
        modifier = Modifier.fillMaxWidth(),
        config = {
            direction(
                if (constraints.maxWidth < 400.dp.roundToPx()) FlexDirection.Column
                else FlexDirection.Row
            )
        },
    ) {
        // This child has a fixed size and will not flex.
        Box(
            modifier = Modifier.size(80.dp).background(Color.Magenta),
            contentAlignment = Alignment.Center,
        ) {
            Text("Fixed")
        }
        // This child has a grow factor of 1. It will take up 1/3 of the remaining space.
        Box(
            modifier = Modifier.height(80.dp).flex { grow(1f) }.background(Color.Yellow),
            contentAlignment = Alignment.Center,
        ) {
            Text("Grow = 1")
        }
        // This child has a growth factor of 2. It will take up 2/3 of the remaining space.
        Box(
            modifier = Modifier.height(80.dp).flex { grow(2f) }.background(Color.Green),
            contentAlignment = Alignment.Center,
        ) {
            Text("Grow = 2")
        }
    }
}