# FlexBoxConfigScope

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

  ```
  sealed interface FlexBoxConfigScope : Density
  ```

*** ** * ** ***

Receiver scope for configuring `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBox.composable#FlexBox(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.FlexBoxConfig,kotlin.Function1)` container properties.

This scope is provided by `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBoxConfig`. All configuration functions are called during the layout/measure phase, not during composition. Changes to state-backed values read within this scope will trigger a relayout, entirely skipping recomposition.

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

## Summary

| ### Public functions |
|---|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBoxConfigScope#alignContent(androidx.compose.foundation.layout.FlexAlignContent)(value: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexAlignContent)` Distributes multiple flex lines along the cross axis. | Cmn |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBoxConfigScope#alignItems(androidx.compose.ui.layout.AlignmentLine)(alignmentLine: https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/AlignmentLine)` Aligns all items to a specific baseline. | Cmn |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBoxConfigScope#alignItems(kotlin.Function1)(alignmentLineBlock: (https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/Measured) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html)` Aligns all items to a custom baseline computed from each measured item. | Cmn |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBoxConfigScope#alignItems(androidx.compose.foundation.layout.FlexAlignItems)(value: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexAlignItems)` Sets the default alignment for children along the cross axis within each line. | Cmn |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBoxConfigScope#columnGap(androidx.compose.ui.unit.Dp)(value: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp)` Sets the horizontal spacing between items or columns. | Cmn |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBoxConfigScope#direction(androidx.compose.foundation.layout.FlexDirection)(value: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexDirection)` Sets the direction of the main axis along which children are laid out. | Cmn |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBoxConfigScope#gap(androidx.compose.ui.unit.Dp)(all: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp)` Sets both `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBoxConfigScope#rowGap(androidx.compose.ui.unit.Dp)` and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBoxConfigScope#columnGap(androidx.compose.ui.unit.Dp)` to the same value. | Cmn |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBoxConfigScope#gap(androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp)(row: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, column: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp)` Sets `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBoxConfigScope#rowGap(androidx.compose.ui.unit.Dp)` and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBoxConfigScope#columnGap(androidx.compose.ui.unit.Dp)` to different values. | Cmn |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBoxConfigScope#justifyContent(androidx.compose.foundation.layout.FlexJustifyContent)(value: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexJustifyContent)` Sets how children are distributed along the main axis. | Cmn |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBoxConfigScope#maxItemsInEachLine(kotlin.Int)(value: @https://developer.android.com/reference/kotlin/androidx/annotation/IntRange(from = 1) https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html)` Sets the maximum number of items allowed in each line. | Cmn |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBoxConfigScope#rowGap(androidx.compose.ui.unit.Dp)(value: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp)` Sets the vertical spacing between items or lines. | Cmn |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBoxConfigScope#wrap(androidx.compose.foundation.layout.FlexWrap)(value: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexWrap)` Sets whether children are forced onto a single line or can wrap onto multiple lines. | Cmn |

| ### Public properties |
|---|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBoxConfigScope#constraints()` The layout constraints passed to this `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBox.composable#FlexBox(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.FlexBoxConfig,kotlin.Function1)` from its parent. | Cmn |

### Inherited functions

From [androidx.compose.ui.unit.Density](https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Density) `open https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html` `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp.https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Density#(androidx.compose.ui.unit.Dp).roundToPx()()`

Convert `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp` to `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html` by rounding
Cmn `open https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html` `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/TextUnit.https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Density#(androidx.compose.ui.unit.TextUnit).roundToPx()()`

Convert Sp to `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html` by rounding
Cmn `open https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp` `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html.https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Density#(kotlin.Int).toDp()()`

Convert an `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html` pixel value to `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp`.
Cmn `open https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp` `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html.https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Density#(kotlin.Float).toDp()()`

Convert a `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html` pixel value to a Dp
Cmn `open https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/DpSize` `https://developer.android.com/reference/kotlin/androidx/compose/ui/geometry/Size.https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Density#(androidx.compose.ui.geometry.Size).toDpSize()()`

Convert a `https://developer.android.com/reference/kotlin/androidx/compose/ui/geometry/Size` to a `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/DpSize`.
Cmn `open https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html` `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp.https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Density#(androidx.compose.ui.unit.Dp).toPx()()`

Convert `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp` to pixels.
Cmn `open https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html` `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/TextUnit.https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Density#(androidx.compose.ui.unit.TextUnit).toPx()()`

Convert Sp to pixels.
Cmn `open https://developer.android.com/reference/kotlin/androidx/compose/ui/geometry/Rect` `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/DpRect.https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Density#(androidx.compose.ui.unit.DpRect).toRect()()`

Convert a `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/DpRect` to a `https://developer.android.com/reference/kotlin/androidx/compose/ui/geometry/Rect`.
Cmn `open https://developer.android.com/reference/kotlin/androidx/compose/ui/geometry/Size` `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/DpSize.https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Density#(androidx.compose.ui.unit.DpSize).toSize()()`

Convert a `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/DpSize` to a `https://developer.android.com/reference/kotlin/androidx/compose/ui/geometry/Size`.
Cmn `open https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/TextUnit` `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html.https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Density#(kotlin.Int).toSp()()`

Convert an `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html` pixel value to Sp.
Cmn `open https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/TextUnit` `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html.https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Density#(kotlin.Float).toSp()()`

Convert a `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html` pixel value to a Sp
Cmn From [androidx.compose.ui.unit.FontScaling](https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/FontScaling) `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp` `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/TextUnit.https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/FontScaling#(androidx.compose.ui.unit.TextUnit).toDp()()`

Convert Sp to `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp`.
Cmn `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/TextUnit` `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp.https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/FontScaling#(androidx.compose.ui.unit.Dp).toSp()()`

Convert `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp` to Sp.
Cmn

### Inherited properties

From [androidx.compose.ui.unit.Density](https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Density) `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html` `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Density#density()`

The logical density of the display.
Cmn From [androidx.compose.ui.unit.FontScaling](https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/FontScaling) `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html` `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/FontScaling#fontScale()`

Current user preference for the scaling factor for fonts.
Cmn

## Public functions

### alignContent

Cmn Added in [1.11.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.11.0)

```
fun alignContent(value: FlexAlignContent): Unit
```

Distributes multiple flex lines along the cross axis.

- Only applies when `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBoxConfigScope#wrap(androidx.compose.foundation.layout.FlexWrap)` is `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexWrap#Wrap()` or `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexWrap#WrapReverse()`, multiple lines exist, and the container has extra cross-axis space. Distributes and expands flex lines along the cross axis.

<!-- -->

- `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexAlignContent#Start()`: packs lines toward the cross-start edge

- `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexAlignContent#End()`: packs lines toward the cross-end edge

- `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexAlignContent#Center()`: centers lines along the cross axis

- `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexAlignContent#Stretch()`: stretches lines to fill available cross-axis space

- `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexAlignContent#SpaceBetween()`: distributes lines evenly with no space at outer edges

- `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexAlignContent#SpaceAround()`: distributes lines with half-size space at outer edges

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.FlexAlignContent
import androidx.compose.foundation.layout.FlexBox
import androidx.compose.foundation.layout.FlexBoxConfig
import androidx.compose.foundation.layout.FlexDirection
import androidx.compose.foundation.layout.FlexWrap
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.size
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

// Can be extracted to a top-level FlexBoxConfig
val SpaceAroundWrap = FlexBoxConfig {
    direction(FlexDirection.Row)
    wrap(FlexWrap.Wrap)
    alignContent(FlexAlignContent.SpaceAround)
}

FlexBox(modifier = Modifier.fillMaxSize(), config = SpaceAroundWrap) {
    repeat(20) { Box(Modifier.size(80.dp).background(Color.Blue)) }
}
```

| Parameters |
|---|---|
| `value: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexAlignContent` | cross-axis distribution for flex lines. Defaults to `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexAlignContent#Start()` |

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexAlignContent` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexAlignItems` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexAlignSelf` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBoxConfigScope#wrap(androidx.compose.foundation.layout.FlexWrap)` |   |

### alignItems

Cmn Added in [1.11.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.11.0)

```
fun alignItems(alignmentLine: AlignmentLine): Unit
```

Aligns all items to a specific baseline.

This is equivalent to calling `alignItems(FlexAlignItems.Baseline)` but allows specifying exactly which alignment line to use (e.g., `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/package-summary#FirstBaseline()` or `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/package-summary#LastBaseline()`).

```kotlin
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.FlexBox
import androidx.compose.foundation.layout.FlexBoxConfig
import androidx.compose.foundation.layout.FlexDirection
import androidx.compose.material3.Text
import androidx.compose.ui.layout.FirstBaseline
import androidx.compose.ui.unit.sp

// Can be extracted to a top-level FlexBoxConfig
val BaselineRow = FlexBoxConfig {
    direction(FlexDirection.Row)
    alignItems(FirstBaseline)
}

FlexBox(config = BaselineRow) {
    Text("Small", fontSize = 12.sp)
    Text("Large", fontSize = 24.sp)
}
```

| Parameters |
|---|---|
| `alignmentLine: https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/AlignmentLine` | The alignment line to use. |

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

### alignItems

Cmn Added in [1.11.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.11.0)

```
fun alignItems(alignmentLineBlock: (Measured) -> Int): Unit
```

Aligns all items to a custom baseline computed from each measured item.

Use this when you need custom baseline calculation logic. This functions similarly to `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope#(androidx.compose.ui.Modifier).alignBy(androidx.compose.ui.layout.HorizontalAlignmentLine)` and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/ColumnScope#(androidx.compose.ui.Modifier).alignBy(androidx.compose.ui.layout.VerticalAlignmentLine)`.

```kotlin
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.FlexBox
import androidx.compose.foundation.layout.FlexDirection
import androidx.compose.material3.Text
import androidx.compose.ui.Alignment
import androidx.compose.ui.layout.AlignmentLine
import androidx.compose.ui.layout.FirstBaseline
import androidx.compose.ui.unit.sp

FlexBox(
    config = {
        direction(FlexDirection.Row)
        alignItems { measured ->
            // Custom baseline: 10px below the first baseline
            val baseline = measured[FirstBaseline]
            if (baseline != AlignmentLine.Unspecified) baseline + 10
            else measured.measuredHeight
        }
    }
) {
    Text("Custom", fontSize = 14.sp)
    Text("Baseline", fontSize = 20.sp)
}
```

| Parameters |
|---|---|
| `alignmentLineBlock: (https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/Measured) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html` | A function that computes the baseline position from a `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/Measured` item. |

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

### alignItems

Cmn Added in [1.11.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.11.0)

```
fun alignItems(value: FlexAlignItems): Unit
```

Sets the default alignment for children along the cross axis within each line.

This controls how items are positioned perpendicular to the main axis. Individual items can override this default alignment using `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexConfigScope#alignSelf(androidx.compose.foundation.layout.FlexAlignSelf)`.

- `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexAlignItems#Start()`: Items aligned to the `cross-start` edge within the line.

- `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexAlignItems#End()`: Items aligned to the `cross-end` edge within the line.

- `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexAlignItems#Center()`: Items centered along the cross axis within the line.

- `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexAlignItems#Stretch()`: Items stretched to fill the line's cross-axis size.

- `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexAlignItems#Baseline()`: Items aligned by their baseline within the line.

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.FlexAlignItems
import androidx.compose.foundation.layout.FlexBox
import androidx.compose.foundation.layout.FlexBoxConfig
import androidx.compose.foundation.layout.FlexDirection
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.size
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

// Can be extracted to a top-level FlexBoxConfig
val CenteredRow = FlexBoxConfig {
    direction(FlexDirection.Row)
    alignItems(FlexAlignItems.Center)
}

FlexBox(modifier = Modifier.height(200.dp), config = CenteredRow) {
    Text("Centered")
    Box(Modifier.size(50.dp).background(Color.Blue))
}
```

| Parameters |
|---|---|
| `value: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexAlignItems` | The align items value. Default is `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexAlignItems#Start()`. |

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexAlignItems` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexConfigScope#alignSelf(androidx.compose.foundation.layout.FlexAlignSelf)` |   |

### columnGap

Cmn Added in [1.11.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.11.0)

```
fun columnGap(value: Dp): Unit
```

Sets the horizontal spacing between items or columns.

Regardless of the flex `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBoxConfigScope#direction(androidx.compose.foundation.layout.FlexDirection)`, this always applies spacing along the horizontal axis (X-axis). In a horizontal layout, this represents the space between the items themselves. In a vertical layout with wrapping, this represents the space between wrapped columns.

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

// Can be extracted to a top-level FlexBoxConfig
val RowWithColumnGap = FlexBoxConfig {
    direction(FlexDirection.Row)
    columnGap(12.dp)
}

FlexBox(config = RowWithColumnGap) {
    Box(Modifier.size(50.dp).background(Color.Red))
    Box(Modifier.size(50.dp).background(Color.Green))
    Box(Modifier.size(50.dp).background(Color.Blue))
}
```

| Parameters |
|---|---|
| `value: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp` | The horizontal gap size. Default is `0.dp`. |

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBoxConfigScope#rowGap(androidx.compose.ui.unit.Dp)` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBoxConfigScope#gap(androidx.compose.ui.unit.Dp)` |   |

### direction

Cmn Added in [1.11.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.11.0)

```
fun direction(value: FlexDirection): Unit
```

Sets the direction of the main axis along which children are laid out.

The main axis determines the primary direction of item placement:

- `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexDirection#Row()`: Items placed horizontally, `main-start` to `main-end` (end to start in RTL).

- `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexDirection#RowReverse()`: Items placed horizontally, end to start (start to end in RTL).

- `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexDirection#Column()`: Items placed vertically, top to bottom.

- `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexDirection#ColumnReverse()`: Items placed vertically, bottom to top.

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

// Can be extracted to top-level FlexBoxConfig constants
val HorizontalConfig = FlexBoxConfig { direction(FlexDirection.Row) }
val VerticalConfig = FlexBoxConfig { direction(FlexDirection.Column) }

// Horizontal layout
FlexBox(config = HorizontalConfig) {
    Box(Modifier.size(50.dp).background(Color.Red))
    Box(Modifier.size(50.dp).background(Color.Green))
    Box(Modifier.size(50.dp).background(Color.Blue))
}
```

| Parameters |
|---|---|
| `value: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexDirection` | The flex direction. Default is `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexDirection#Row()`. |

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

### gap

Cmn Added in [1.11.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.11.0)

```
fun gap(all: Dp): Unit
```

Sets both `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBoxConfigScope#rowGap(androidx.compose.ui.unit.Dp)` and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBoxConfigScope#columnGap(androidx.compose.ui.unit.Dp)` to the same value.

This is a convenience function for uniform spacing across both axes.

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.FlexBox
import androidx.compose.foundation.layout.FlexBoxConfig
import androidx.compose.foundation.layout.FlexDirection
import androidx.compose.foundation.layout.FlexWrap
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

// Can be extracted to a top-level FlexBoxConfig
val WrapWithUniformGap = FlexBoxConfig {
    direction(FlexDirection.Row)
    wrap(FlexWrap.Wrap)
    gap(8.dp)
}

FlexBox(modifier = Modifier.width(200.dp), config = WrapWithUniformGap) {
    repeat(6) { Box(Modifier.size(60.dp).background(Color.Blue)) }
}
```

| Parameters |
|---|---|
| `all: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp` | The gap size to apply to both row and column gaps. |

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBoxConfigScope#rowGap(androidx.compose.ui.unit.Dp)` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBoxConfigScope#columnGap(androidx.compose.ui.unit.Dp)` |   |

### gap

Cmn Added in [1.11.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.11.0)

```
fun gap(row: Dp, column: Dp): Unit
```

Sets `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBoxConfigScope#rowGap(androidx.compose.ui.unit.Dp)` and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBoxConfigScope#columnGap(androidx.compose.ui.unit.Dp)` to different values.

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.FlexBox
import androidx.compose.foundation.layout.FlexBoxConfig
import androidx.compose.foundation.layout.FlexDirection
import androidx.compose.foundation.layout.FlexWrap
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

// Can be extracted to a top-level FlexBoxConfig
val WrapWithDifferentGaps = FlexBoxConfig {
    direction(FlexDirection.Row)
    wrap(FlexWrap.Wrap)
    gap(row = 16.dp, column = 8.dp)
}

FlexBox(modifier = Modifier.width(200.dp), config = WrapWithDifferentGaps) {
    repeat(6) { Box(Modifier.size(60.dp).background(Color.Blue)) }
}
```

| Parameters |
|---|---|
| `row: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp` | The vertical spacing (Y-axis). |
| `column: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp` | The horizontal spacing (X-axis). |

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBoxConfigScope#rowGap(androidx.compose.ui.unit.Dp)` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBoxConfigScope#columnGap(androidx.compose.ui.unit.Dp)` |   |

### justifyContent

Cmn Added in [1.11.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.11.0)

```
fun justifyContent(value: FlexJustifyContent): Unit
```

Sets how children are distributed along the main axis.

This controls the spacing and positioning of items within each line after their main axis sizes have been resolved.

- `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexJustifyContent#Start()`: Items packed toward the `main-start` edge.

- `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexJustifyContent#End()`: Items packed toward the `main-end` edge.

- `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexJustifyContent#Center()`: Items centered along the main axis.

- `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexJustifyContent#SpaceBetween()`: Items evenly distributed; first at start, last at end.

- `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexJustifyContent#SpaceAround()`: Items evenly distributed with half-size space at edges.

- `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexJustifyContent#SpaceEvenly()`: Items evenly distributed with equal space everywhere.

```kotlin
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.FlexBox
import androidx.compose.foundation.layout.FlexBoxConfig
import androidx.compose.foundation.layout.FlexDirection
import androidx.compose.foundation.layout.FlexJustifyContent
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier

// Can be extracted to a top-level FlexBoxConfig
val SpaceBetweenRow = FlexBoxConfig {
    direction(FlexDirection.Row)
    justifyContent(FlexJustifyContent.SpaceBetween)
}

FlexBox(modifier = Modifier.fillMaxWidth(), config = SpaceBetweenRow) {
    Text("Left")
    Text("Right")
}
```

| Parameters |
|---|---|
| `value: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexJustifyContent` | The justify content value. Default is `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexJustifyContent#Start()`. |

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

### maxItemsInEachLine

Cmn Added in [1.13.0-rc01](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.13.0-rc01)

```
fun maxItemsInEachLine(value: @IntRange(from = 1) Int): Unit
```

Sets the maximum number of items allowed in each line.

A new line is started once the current line already holds `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBoxConfigScope#maxItemsInEachLine(kotlin.Int)` items, even if there is still enough main-axis space for more. This only takes effect when `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBoxConfigScope#wrap(androidx.compose.foundation.layout.FlexWrap)` is `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexWrap#Wrap()` or `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexWrap#WrapReverse()`; with `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexWrap#NoWrap()` all items are always placed on a single line.

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.FlexBox
import androidx.compose.foundation.layout.FlexBoxConfig
import androidx.compose.foundation.layout.FlexDirection
import androidx.compose.foundation.layout.FlexWrap
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.size
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

// Can be extracted to a top-level FlexBoxConfig
val ThreePerLineRow = FlexBoxConfig {
    direction(FlexDirection.Row)
    wrap(FlexWrap.Wrap)
    // Force a line break after every 3 items, even if more would fit.
    maxItemsInEachLine(3)
}

FlexBox(modifier = Modifier.fillMaxWidth(), config = ThreePerLineRow) {
    repeat(10) { Box(Modifier.size(60.dp).background(Color.Blue)) }
}
```

| Parameters |
|---|---|
| `value: @https://developer.android.com/reference/kotlin/androidx/annotation/IntRange(from = 1) https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html` | The maximum number of items per line. Must be positive. Defaults to no limit. |

| Throws |
|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-illegal-argument-exception/index.html` | if `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBoxConfigScope#maxItemsInEachLine(kotlin.Int)` is not positive. |

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBoxConfigScope#wrap(androidx.compose.foundation.layout.FlexWrap)` |   |

### rowGap

Cmn Added in [1.11.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.11.0)

```
fun rowGap(value: Dp): Unit
```

Sets the vertical spacing between items or lines.

Regardless of the flex `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBoxConfigScope#direction(androidx.compose.foundation.layout.FlexDirection)`, this always applies spacing along the vertical axis (Y-axis). In a horizontal layout with wrapping, this represents the space between wrapped lines. In a vertical layout, this represents the space between the items themselves.

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.FlexBox
import androidx.compose.foundation.layout.FlexBoxConfig
import androidx.compose.foundation.layout.FlexDirection
import androidx.compose.foundation.layout.FlexWrap
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

// Can be extracted to a top-level FlexBoxConfig
val WrapWithRowGap = FlexBoxConfig {
    direction(FlexDirection.Row)
    wrap(FlexWrap.Wrap)
    rowGap(16.dp)
}

FlexBox(modifier = Modifier.width(200.dp), config = WrapWithRowGap) {
    repeat(6) { Box(Modifier.size(60.dp).background(Color.Blue)) }
}
```

| Parameters |
|---|---|
| `value: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp` | The vertical gap size. Default is `0.dp`. |

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBoxConfigScope#columnGap(androidx.compose.ui.unit.Dp)` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBoxConfigScope#gap(androidx.compose.ui.unit.Dp)` |   |

### wrap

Cmn Added in [1.11.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.11.0)

```
fun wrap(value: FlexWrap): Unit
```

Sets whether children are forced onto a single line or can wrap onto multiple lines.

- `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexWrap#NoWrap()`: All items stay on one line. Items may visually overflow on main axis if they cannot shrink enough.

- `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexWrap#Wrap()`: Items wrap to new lines toward the `cross-end` edge.

- `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexWrap#WrapReverse()`: Items wrap to new lines toward the `cross-start` edge.

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.FlexBox
import androidx.compose.foundation.layout.FlexBoxConfig
import androidx.compose.foundation.layout.FlexDirection
import androidx.compose.foundation.layout.FlexWrap
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

// Can be extracted to a top-level FlexBoxConfig
val WrappingRow = FlexBoxConfig {
    direction(FlexDirection.Row)
    wrap(FlexWrap.Wrap)
}

// Items wrap to next line when they don't fit
FlexBox(modifier = Modifier.width(250.dp), config = WrappingRow) {
    repeat(10) { Box(Modifier.size(60.dp).background(Color.Blue)) }
}
```

| Parameters |
|---|---|
| `value: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexWrap` | The wrap behavior. Default is `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexWrap#NoWrap()`. |

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

## Public properties

### constraints

Cmn

```
val constraints: Constraints
```

The layout constraints passed to this `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBox.composable#FlexBox(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.FlexBoxConfig,kotlin.Function1)` from its parent.

Use this for creating responsive layouts that dynamically adapt their properties (like direction, wrapping, or gaps) based on the available incoming space.

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

FlexBox(
    config = {
        direction(FlexDirection.Row)
        // Switch to wrapping on narrow screens
        wrap(if (constraints.maxWidth < 400.dp.roundToPx()) FlexWrap.Wrap else FlexWrap.NoWrap)
        // Adjust gap based on available space
        gap(if (constraints.maxWidth > 800.dp.roundToPx()) 16.dp else 8.dp)
    }
) {
    repeat(4) { Box(Modifier.size(80.dp).background(Color.Blue)) }
}
```

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints` |   |