---
title: "FlexConfig"
description: "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][FlexConfigScope.grow] or [shrink][FlexConfigScope.shrink]) is assigned multiple times
within the configuration block, the final call takes precedence."
type: "interface"
---

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


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

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



```kotlin
@ExperimentalFlexBoxApi
fun interface FlexConfig
```


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.


## Functions

```kotlin
fun FlexConfigScope.configure()
```


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



## Code Examples

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