---
title: "FlexConfig"
description: "Combine two FlexConfig objects together."
type: "function"
lastmod: "2026-06-18T10:32:52.753477Z"
---
## API Reference

### FlexConfig

> Source set: Common

```kotlin
@ExperimentalFlexBoxApi
fun FlexConfig(first: FlexConfig, second: FlexConfig): FlexConfig
```

Combine two [FlexConfig](/jetpack-compose/androidx.compose.foundation/foundation-layout/functions/FlexConfig) objects together. Configs further "to the right" will override
properties to the left of them, on a per-property basis.

### FlexConfig

> Source set: Common

```kotlin
@ExperimentalFlexBoxApi
fun FlexConfig(first: FlexConfig, second: FlexConfig, third: FlexConfig): FlexConfig
```

Combine three [FlexConfig](/jetpack-compose/androidx.compose.foundation/foundation-layout/functions/FlexConfig) objects together. Configs further "to the right" will override
properties to the left of them, on a per-property basis.

### FlexConfig

> Source set: Common

```kotlin
@ExperimentalFlexBoxApi
fun FlexConfig(vararg configs: FlexConfig): FlexConfig
```

Combine multiple [FlexConfig](/jetpack-compose/androidx.compose.foundation/foundation-layout/functions/FlexConfig) objects together. Configs further "to the right" will override
properties to the left of them, on a per-property basis.

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