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

### FlexBoxConfig

> Source set: Common

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

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

### FlexBoxConfig

> Source set: Common

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

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

### FlexBoxConfig

> Source set: Common

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

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

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