Known direct subclasses

Represents a configuration for a FlexBox container.

FlexBoxConfig is implemented as a functional interface where the lambda is executed on FlexBoxConfigScope during the layout phase. This means that reading state inside the lambda will only trigger relayout, not recomposition.

Note: Configuration is applied sequentially. If a function is called multiple times, the last call takes precedence.

Reusable Configs

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.FlexBox
import androidx.compose.foundation.layout.FlexBoxConfig
import androidx.compose.foundation.layout.FlexDirection
import androidx.compose.foundation.layout.FlexWrap
import androidx.compose.foundation.layout.size
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

// Define reusable config - can be a top-level constant
val RowWrapConfig = FlexBoxConfig {
    direction(FlexDirection.Row)
    wrap(FlexWrap.Wrap)
    gap(8.dp)
}

FlexBox(config = RowWrapConfig) {
    repeat(6) { Box(Modifier.size(80.dp).background(Color.Blue)) }
}

Responsive Configs

Access FlexBoxConfigScope.constraints for responsive layouts:

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.FlexBox
import androidx.compose.foundation.layout.FlexBoxConfig
import androidx.compose.foundation.layout.FlexDirection
import androidx.compose.foundation.layout.FlexWrap
import androidx.compose.foundation.layout.size
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

val ResponsiveFlexBoxConfig = FlexBoxConfig {
    direction(FlexDirection.Row)
    wrap(if (constraints.maxWidth < 600.dp.roundToPx()) FlexWrap.Wrap else FlexWrap.NoWrap)
}
FlexBox(config = ResponsiveFlexBoxConfig) {
    repeat(4) { Box(Modifier.size(100.dp).background(Color.Blue)) }
}
See also
FlexBoxConfigScope
FlexBox

Summary

Nested types

Public companion functions
open Unit

Default Config: Row direction, NoWrap, Start alignment.
Cmn

Public functions
Unit

Configures the FlexBox container properties.
Cmn

Public companion functions

configure

Cmn 
open fun FlexBoxConfigScope.configure(): Unit

Default Config: Row direction, NoWrap, Start alignment.

Public functions

configure

Cmn 
fun FlexBoxConfigScope.configure(): Unit

Configures the FlexBox container properties. Called during the layout phase, not during composition.