Known direct subclasses

Represents a configuration for a flex item within a FlexBox.

This configuration is defined via a lambda that operates on a FlexConfigScope. 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 (such as grow or shrink) is assigned multiple times within the configuration block, the final call takes precedence.

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.FlexAlignSelf
import androidx.compose.foundation.layout.FlexBox
import androidx.compose.foundation.layout.FlexConfig
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

// Define reusable FlexConfig - can be a top-level constant
val FlexibleCentered = FlexConfig {
    grow(1f)
    shrink(0f)
    basis(100.dp)
    alignSelf(FlexAlignSelf.Center)
}

FlexBox(modifier = Modifier.fillMaxWidth().height(100.dp)) {
    Box(Modifier.background(Color.Blue).flex(FlexibleCentered))
}
See also
FlexConfigScope
flex

Summary

Nested types

Public companion functions
open Unit

Applies the configuration to the given FlexConfigScope.This method is invoked by the layout system during the measurement phase, not during composition.
Cmn
open infix FlexConfig
then(other: FlexConfig)

Merging the identity with any config yields that config.
Cmn

Public functions
Unit

Applies the configuration to the given FlexConfigScope.This method is invoked by the layout system during the measurement phase, not during composition.
Cmn
open infix FlexConfig
then(other: FlexConfig)

Merges this config with another.
Cmn

Public companion functions

FlexConfigScope.configure

Cmn 
open fun FlexConfigScope.configure(): Unit

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

then

Cmn 
open infix fun then(other: FlexConfig): FlexConfig

Merging the identity with any config yields that config.

Public functions

FlexConfigScope.configure

Cmn 
fun FlexConfigScope.configure(): Unit

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

then

Cmn
Added in 1.12.0-beta01
open infix fun then(other: FlexConfig): FlexConfig

Merges this config with another. Configs further "to the right" will override properties to the left of them, on a per-property basis.

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.FlexAlignSelf
import androidx.compose.foundation.layout.FlexBasis
import androidx.compose.foundation.layout.FlexBox
import androidx.compose.foundation.layout.FlexConfig
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

// Shared design system item style tokens
val SharedItemDefaults = FlexConfig {
    shrink(1f)
    basis(FlexBasis.Auto)
}

// Individual special-case item overrides
val GrowPriority = FlexConfig { grow(2f) }
val CenterAlignmentOverride = FlexConfig { alignSelf(FlexAlignSelf.Center) }

// Construct optimized configurations via combination APIs
val FlexibleHeroItem = SharedItemDefaults then GrowPriority then CenterAlignmentOverride
val StandardFlexibleItem = FlexConfig(SharedItemDefaults, GrowPriority)

// An empty call returns the identity element cleanly
val EmptyFlexExtension = FlexConfig()

FlexBox(modifier = Modifier.fillMaxWidth().height(120.dp)) {
    // Applies premium combined config with extensions
    Box(
        Modifier.height(60.dp)
            .background(Color.Cyan)
            .flex(FlexibleHeroItem then EmptyFlexExtension)
    )
    Box(Modifier.height(60.dp).background(Color.Yellow).flex(StandardFlexibleItem))
}
Parameters
other: FlexConfig

the config to merge into the receiver.