---
title: "FlexBoxConfig"
description: "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:


Furthermore, because the [FlexBoxConfigScope] provides direct access to the incoming
[Constraints][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:"
type: "interface"
---

<div class='type'>Interface</div>


<a id='references'></a>

<div class='sourceset sourceset-common'>Common</div>



```kotlin
@ExperimentalFlexBoxApi
fun interface FlexBoxConfig
```


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:


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:


## Functions

```kotlin
fun FlexBoxConfigScope.configure()
```


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



## Code Examples

### FlexBoxConfigResponsiveSample
```kotlin
@OptIn(ExperimentalFlexBoxApi::class)
@Composable
fun FlexBoxConfigResponsiveSample() {
    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)) }
    }
}
```

### FlexBoxConfigReusableSample
```kotlin
@OptIn(ExperimentalFlexBoxApi::class)
@Composable
fun FlexBoxConfigReusableSample() {
    // 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)) }
    }
}
```