# FlexBoxScope

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

  ```
  @LayoutScopeMarker
  interface FlexBoxScope
  ```

*** ** * ** ***

Scope for the content of 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)`. Provides the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBoxScope#(androidx.compose.ui.Modifier).flex(androidx.compose.foundation.layout.FlexConfig)` modifier for configuring individual flex item properties.

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.FlexBox
import androidx.compose.foundation.layout.FlexConfig
import androidx.compose.foundation.layout.size
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

// FlexConfig can be defined as top-level constants for reuse
val NoShrink = FlexConfig { shrink(0f) }

FlexBox {
    // Basic item without flex configuration
    Box(Modifier.size(50.dp).background(Color.Red))

    // Item with inline flex configuration
    Box(Modifier.size(50.dp).background(Color.Green).flex { grow(1f) })

    // Item with reusable FlexConfig
    Box(Modifier.size(50.dp).background(Color.Blue).flex(NoShrink))
}
```

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBox.composable#FlexBox(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.FlexBoxConfig,kotlin.Function1)` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexConfig` |   |

## Summary

| ### Public functions |
|---|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBoxScope#(androidx.compose.ui.Modifier).flex(androidx.compose.foundation.layout.FlexConfig)(flexConfig: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexConfig)` Configures the flex properties of this element within the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBox.composable#FlexBox(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.FlexBoxConfig,kotlin.Function1)` using the provided `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexConfig`. | Cmn |
| `open https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBoxScope#(androidx.compose.ui.Modifier).flex(kotlin.Function1)(flexConfig: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexConfigScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)` Configures the flex properties of this element within the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBox.composable#FlexBox(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.FlexBoxConfig,kotlin.Function1)` using a configuration lambda. | Cmn |

## Public functions

### Modifier.flex

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

```
fun Modifier.flex(flexConfig: FlexConfig): Modifier
```

Configures the flex properties of this element within the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBox.composable#FlexBox(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.FlexBoxConfig,kotlin.Function1)` using the provided `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexConfig`.

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.FlexAlignSelf
import androidx.compose.foundation.layout.FlexBox
import androidx.compose.foundation.layout.FlexConfig
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
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 FlexConfig - can be a top-level constant
val GrowAndCenter = FlexConfig {
    grow(1f)
    alignSelf(FlexAlignSelf.Center)
}

FlexBox(modifier = Modifier.fillMaxWidth().height(100.dp)) {
    Box(Modifier.size(50.dp).background(Color.Red))
    Box(Modifier.background(Color.Green).flex(GrowAndCenter))
    Box(Modifier.size(50.dp).background(Color.Blue))
}
```

| Parameters |
|---|---|
| `flexConfig: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexConfig` | The flex configuration to apply. |

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexConfig` |   |

### Modifier.flex

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

```
open fun Modifier.flex(flexConfig: FlexConfigScope.() -> Unit): Modifier
```

Configures the flex properties of this element within the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBox.composable#FlexBox(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.FlexBoxConfig,kotlin.Function1)` using a configuration lambda.

This modifier allows you to specify how an individual item should share available space (grow, shrink, basis) and how it aligns itself along the cross axis (alignSelf).

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.FlexAlignSelf
import androidx.compose.foundation.layout.FlexBox
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

FlexBox(modifier = Modifier.fillMaxWidth()) {
    Box(
        Modifier.height(50.dp).background(Color.Blue).flex {
            grow(1f)
            shrink(0f)
            alignSelf(FlexAlignSelf.Center)
        }
    )
}
```

| Parameters |
|---|---|
| `flexConfig: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexConfigScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | A lambda that configures the flex properties within a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexConfigScope`. |

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexConfigScope` |   |