# FlexConfig

Artifact: [androidx.compose.foundation:foundation-layout](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/layout/FlexBox.kt+class:androidx.compose.foundation.layout.FlexConfig) Added in [1.11.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.11.0) Common/AllAndroid/JVM
- Cmn

  ```
  fun interface FlexConfig
  ```
Known direct subclasses [FlexConfig.Companion](https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexConfig.Companion)

|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexConfig.Companion` |   |

*** ** * ** ***

Represents a configuration for a flex item within a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBox.composable#FlexBox(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.FlexBoxConfig,kotlin.Function1)`.

This configuration is defined via a lambda that operates on a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/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 `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexConfigScope#grow(kotlin.Float)` or `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexConfigScope#shrink(kotlin.Float)`) is assigned multiple times within the configuration block, the final call takes precedence.

```kotlin
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 |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexConfigScope` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBoxScope#(androidx.compose.ui.Modifier).flex(androidx.compose.foundation.layout.FlexConfig)` |   |

## Summary

| ### Nested types |
|---|
| `object https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexConfig.Companion : https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexConfig` |

| ### Public companion functions |
|---|---|---|
| `open https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexConfigScope.https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexConfig#(androidx.compose.foundation.layout.FlexConfigScope).configure()()` Applies the configuration to the given `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexConfigScope`.This method is invoked by the layout system during the measurement phase, not during composition. | Cmn |
| `open infix https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexConfig` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexConfig#then(androidx.compose.foundation.layout.FlexConfig)(other: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexConfig)` Merging the identity with any config yields that config. | Cmn |

| ### Public functions |
|---|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexConfigScope.https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexConfig#(androidx.compose.foundation.layout.FlexConfigScope).configure()()` Applies the configuration to the given `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexConfigScope`.This method is invoked by the layout system during the measurement phase, not during composition. | Cmn |
| `open infix https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexConfig` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexConfig#then(androidx.compose.foundation.layout.FlexConfig)(other: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexConfig)` Merges this config with another. | Cmn |

## Public companion functions

### FlexConfigScope.configure

Cmn Artifact: [androidx.compose.foundation:foundation-layout](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/layout/FlexBox.kt+function:configure)

```
open fun FlexConfigScope.configure(): Unit
```

Applies the configuration to the given `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/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 Artifact: [androidx.compose.foundation:foundation-layout](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/layout/FlexBox.kt+function:configure) Added in [1.11.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.11.0)

```
fun FlexConfigScope.configure(): Unit
```

Applies the configuration to the given `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexConfigScope`.This method is invoked by the layout system during the measurement phase, not during composition.

### then

Cmn Added in [1.12.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.12.0)

```
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.

```kotlin
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: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexConfig` | the config to merge into the receiver. |