---
title: "FlexBoxConfigScope"
description: "Receiver scope for configuring [FlexBox] container properties.

This scope is provided by [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."
type: "interface"
---

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


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

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



```kotlin
@ExperimentalFlexBoxApi
sealed interface FlexBoxConfigScope : Density
```


Receiver scope for configuring `FlexBox` container properties.

This scope is provided by `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.


## Properties

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


```kotlin
val constraints: Constraints
```


The layout constraints passed to this `FlexBox` 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.



## Functions

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


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

The main axis determines the primary direction of item placement:
- `FlexDirection.Row`: Items placed horizontally, `main-start` to `main-end` (end to start in RTL).
- `FlexDirection.RowReverse`: Items placed horizontally, end to start (start to end in RTL).
- `FlexDirection.Column`: Items placed vertically, top to bottom.
- `FlexDirection.ColumnReverse`: Items placed vertically, bottom to top.

#### Parameters

| | |
| --- | --- |
| value | The flex direction. Default is `FlexDirection.Row`. |



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


Sets whether children are forced onto a single line or can wrap onto multiple lines.
- `FlexWrap.NoWrap`: All items stay on one line. Items may visually overflow on main axis if they cannot shrink enough.
- `FlexWrap.Wrap`: Items wrap to new lines toward the `cross-end` edge.
- `FlexWrap.WrapReverse`: Items wrap to new lines toward the `cross-start` edge.

#### Parameters

| | |
| --- | --- |
| value | The wrap behavior. Default is `FlexWrap.NoWrap`. |



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


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.
- `FlexJustifyContent.Start`: Items packed toward the `main-start` edge.
- `FlexJustifyContent.End`: Items packed toward the `main-end` edge.
- `FlexJustifyContent.Center`: Items centered along the main axis.
- `FlexJustifyContent.SpaceBetween`: Items evenly distributed; first at start, last at end.
- `FlexJustifyContent.SpaceAround`: Items evenly distributed with half-size space at edges.
- `FlexJustifyContent.SpaceEvenly`: Items evenly distributed with equal space everywhere.

#### Parameters

| | |
| --- | --- |
| value | The justify content value. Default is `FlexJustifyContent.Start`. |



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


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 `FlexConfigScope.alignSelf`.
- `FlexAlignItems.Start`: Items aligned to the `cross-start` edge within the line.
- `FlexAlignItems.End`: Items aligned to the `cross-end` edge within the line.
- `FlexAlignItems.Center`: Items centered along the cross axis within the line.
- `FlexAlignItems.Stretch`: Items stretched to fill the line's cross-axis size.
- `FlexAlignItems.Baseline`: Items aligned by their baseline within the line.

#### Parameters

| | |
| --- | --- |
| value | The align items value. Default is `FlexAlignItems.Start`. |



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


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., `FirstBaseline` or `LastBaseline`).

#### Parameters

| | |
| --- | --- |
| alignmentLine | The alignment line to use. |



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


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
`RowScope.alignBy` and `ColumnScope.alignBy`.

#### Parameters

| | |
| --- | --- |
| alignmentLineBlock | A function that computes the baseline position from a `Measured` item. |



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


Sets how multiple lines are distributed along the cross axis.

This only applies when `wrap` is `FlexWrap.Wrap` or `FlexWrap.WrapReverse` and there are
multiple lines of items.
- `FlexAlignContent.Start`: Lines packed toward the `cross-start` edge.
- `FlexAlignContent.End`: Lines packed toward the `cross-end` edge.
- `FlexAlignContent.Center`: Lines centered along the cross axis.
- `FlexAlignContent.Stretch`: Lines stretched to fill available cross-axis space.
- `FlexAlignContent.SpaceBetween`: Lines evenly distributed; first at start, last at end.
- `FlexAlignContent.SpaceAround`: Lines evenly distributed with half-size space at edges.

#### Parameters

| | |
| --- | --- |
| value | The align content value. Default is `FlexAlignContent.Start`. |



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


Sets the vertical spacing between items or lines.

Regardless of the flex `direction`, 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.

#### Parameters

| | |
| --- | --- |
| value | The vertical gap size. Default is `0.dp`. |



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


Sets the horizontal spacing between items or columns.

Regardless of the flex `direction`, 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.

#### Parameters

| | |
| --- | --- |
| value | The horizontal gap size. Default is `0.dp`. |



```kotlin
fun gap(value: Dp)
```


Sets both `rowGap` and `columnGap` to the same value.

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

#### Parameters

| | |
| --- | --- |
| value | The gap size to apply to both row and column gaps. |



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


Sets `rowGap` and `columnGap` to different values.

#### Parameters

| | |
| --- | --- |
| row | The vertical spacing (Y-axis). |
| column | The horizontal spacing (X-axis). |