# FlexBoxConfig

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.FlexBoxConfig) Added in [1.11.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.11.0) Common/AllAndroid/JVM
- Cmn

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

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

*** ** * ** ***

Represents a configuration for 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)` container.

This configuration is defined via a lambda that operates on a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/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 `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBox.composable#FlexBox(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.FlexBoxConfig,kotlin.Function1)` containers:

```kotlin
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 `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBoxConfigScope` provides direct access to the incoming `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints`, you can easily create responsive configurations that dynamically adapt their direction, wrapping, or gaps based on the available screen space:

```kotlin
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 |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBoxConfigScope` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBox.composable#FlexBox(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.FlexBoxConfig,kotlin.Function1)` |   |

## Summary

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

| ### 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/FlexBoxConfigScope.https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBoxConfig#(androidx.compose.foundation.layout.FlexBoxConfigScope).configure()()` A default configuration that lays out items in a horizontal row without wrapping, with | Cmn |
| `open infix https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBoxConfig` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBoxConfig#then(androidx.compose.foundation.layout.FlexBoxConfig)(other: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBoxConfig)` Identity elision: 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/FlexBoxConfigScope.https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBoxConfig#(androidx.compose.foundation.layout.FlexBoxConfigScope).configure()()` Applies the configuration to the given `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBoxConfigScope`. | Cmn |
| `open infix https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBoxConfig` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBoxConfig#then(androidx.compose.foundation.layout.FlexBoxConfig)(other: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBoxConfig)` Merges this config with another. | Cmn |

## Public companion functions

### FlexBoxConfigScope.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 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.

### then

Cmn

```
open infix fun then(other: FlexBoxConfig): FlexBoxConfig
```

Identity elision: merging the identity with any config yields that config.

## Public functions

### FlexBoxConfigScope.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 FlexBoxConfigScope.configure(): Unit
```

Applies the configuration to the given `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBoxConfigScope`. 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: FlexBoxConfig): FlexBoxConfig
```

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.FlexAlignItems
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.fillMaxWidth
import androidx.compose.foundation.layout.size
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

// Define partial component layout tokens
val BaseRow = FlexBoxConfig {
    direction(FlexDirection.Row)
    wrap(FlexWrap.Wrap)
}
val CenteredAlignment = FlexBoxConfig { alignItems(FlexAlignItems.Center) }
val StandardGaps = FlexBoxConfig { gap(8.dp) }

// Combine tokens together cleanly via factory functions or infix `then`
val RowTokensCombined = FlexBoxConfig(BaseRow, CenteredAlignment, StandardGaps)

// An empty call returns the default identity element gracefully without allocations
val EmptyExtension = FlexBoxConfig()

FlexBox(modifier = Modifier.fillMaxWidth(), config = RowTokensCombined then EmptyExtension) {
    repeat(4) { Box(Modifier.size(60.dp).background(Color.Magenta)) }
}
```

| Parameters |
|---|---|
| `other: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBoxConfig` | the config to merge into the receiver. |