Known direct subclasses

Represents a configuration for a FlexBox container.

This configuration is defined via a lambda that operates on a FlexBoxConfigScope. Because this configuration block is executed during the layout phase rather than the composition phase, reading state variables inside the block will only trigger a layout pass, completely avoiding costly recompositions.

Configuration properties are applied sequentially. If a property is configured multiple times within the block, the final call takes precedence.

Reusability and Responsiveness

Configurations can be extracted, saved, and reused across multiple FlexBox containers:

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)) }
}

Furthermore, because the FlexBoxConfigScope provides direct access to the incoming Constraints, you can easily create responsive configurations that dynamically adapt their direction, wrapping, or gaps based on the available screen space:

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

A default configuration that lays out items in a horizontal row without wrapping, with items aligned to the start on both axes and no gaps.
Cmn

Public functions
Unit

Applies the configuration to the given FlexBoxConfigScope.
Cmn

Public companion functions

FlexBoxConfigScope.configure

Cmn 
open fun FlexBoxConfigScope.configure(): Unit

A default configuration that lays out items in a horizontal row without wrapping, with items aligned to the start on both axes and no gaps.

Public functions

FlexBoxConfigScope.configure

Cmn 
fun FlexBoxConfigScope.configure(): Unit

Applies the configuration to the given FlexBoxConfigScope. This method is invoked by the layout system during the measurement phase, not during composition.