---
title: "FlexBoxScope"
description: "Scope for the content of a [FlexBox]. Provides the [flex] modifier for configuring individual
flex item properties."
type: "interface"
---

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


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

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



```kotlin
@LayoutScopeMarker
@JvmDefaultWithCompatibility
@ExperimentalFlexBoxApi
interface FlexBoxScope
```


Scope for the content of a `FlexBox`. Provides the `flex` modifier for configuring individual
flex item properties.


## Functions

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


Configures the flex properties of this element within the `FlexBox` using the provided
`FlexConfig`.

#### Parameters

| | |
| --- | --- |
| flexConfig | The flex configuration to apply. |



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


Configures the flex properties of this element within the `FlexBox` 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).

#### Parameters

| | |
| --- | --- |
| flexConfig | A lambda that configures the flex properties within a `FlexConfigScope`. |




## Code Examples

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