FlexBoxConfigScope

Artifact: androidx.compose.foundation:foundation-layout

Cmn

@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.

See also
`FlexBoxConfig`

Summary

Public functions
`Unit`	`alignContent(value: FlexAlignContent)` Sets how multiple lines are distributed along the cross axis.	Cmn
`Unit`	`alignItems(alignmentLine: AlignmentLine)` Aligns all items to a specific baseline.	Cmn
`Unit`	`alignItems(alignmentLineBlock: (Measured) -> Int)` Aligns all items to a custom baseline computed from each measured item.	Cmn
`Unit`	`alignItems(value: FlexAlignItems)` Sets the default alignment for children along the cross axis within each line.	Cmn
`Unit`	`columnGap(value: Dp)` Sets the horizontal spacing between items or columns.	Cmn
`Unit`	`direction(value: FlexDirection)` Sets the direction of the main axis along which children are laid out.	Cmn
`Unit`	`gap(value: Dp)` Sets both `rowGap` and `columnGap` to the same value.	Cmn
`Unit`	`gap(row: Dp, column: Dp)` Sets `rowGap` and `columnGap` to different values.	Cmn
`Unit`	`justifyContent(value: FlexJustifyContent)` Sets how children are distributed along the main axis.	Cmn
`Unit`	`rowGap(value: Dp)` Sets the vertical spacing between items or lines.	Cmn
`Unit`	`wrap(value: FlexWrap)` Sets whether children are forced onto a single line or can wrap onto multiple lines.	Cmn

Public properties
`Constraints`	`constraints` The layout constraints passed to this `FlexBox` from its parent.	Cmn

Inherited functions

From androidx.compose.ui.unit.Density

`open Int`	`Dp.roundToPx()` Convert `Dp` to `Int` by rounding	Cmn
`open Int`	`TextUnit.roundToPx()` Convert Sp to `Int` by rounding	Cmn
`open Dp`	`Int.toDp()` Convert an `Int` pixel value to `Dp`.	Cmn
`open Dp`	`Float.toDp()` Convert a `Float` pixel value to a Dp	Cmn
`open DpSize`	`Size.toDpSize()` Convert a `Size` to a `DpSize`.	Cmn
`open Float`	`Dp.toPx()` Convert `Dp` to pixels.	Cmn
`open Float`	`TextUnit.toPx()` Convert Sp to pixels.	Cmn
`open Rect`	`DpRect.toRect()` Convert a `DpRect` to a `Rect`.	Cmn
`open Size`	`DpSize.toSize()` Convert a `DpSize` to a `Size`.	Cmn
`open TextUnit`	`Int.toSp()` Convert an `Int` pixel value to Sp.	Cmn
`open TextUnit`	`Float.toSp()` Convert a `Float` pixel value to a Sp	Cmn

From androidx.compose.ui.unit.FontScaling

`Dp`	`TextUnit.toDp()` Convert Sp to `Dp`.	Cmn
`TextUnit`	`Dp.toSp()` Convert `Dp` to Sp.	Cmn

Inherited properties

From androidx.compose.ui.unit.Density

Float

density

The logical density of the display.

Cmn

From androidx.compose.ui.unit.FontScaling

Float

fontScale

Current user preference for the scaling factor for fonts.

Cmn

Public functions

alignContent

Cmn

Added in 1.11.0-beta02

fun alignContent(value: FlexAlignContent): Unit

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.

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: FlexAlignContent`	The align content value. Default is `FlexAlignContent.Start`.

See also
`FlexAlignContent`
`wrap`

alignItems

Cmn

Added in 1.11.0-beta02

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

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.material.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: AlignmentLine`	The alignment line to use.

See also
`AlignmentLine`

alignItems

Cmn

Added in 1.11.0-beta02

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

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.FlexBox
import androidx.compose.foundation.layout.FlexDirection
import androidx.compose.material.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: (Measured) -> Int`	A function that computes the baseline position from a `Measured` item.

See also
`Measured`

alignItems

Cmn

Added in 1.11.0-beta02

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 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.

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.material.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: FlexAlignItems`	The align items value. Default is `FlexAlignItems.Start`.

See also
`FlexAlignItems`
`alignSelf`

columnGap

Cmn

Added in 1.11.0-beta02

fun columnGap(value: Dp): Unit

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.

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: Dp`	The horizontal gap size. Default is `0.dp`.

See also
`rowGap`
`gap`

direction

Cmn

Added in 1.11.0-beta02

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:

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.

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: FlexDirection`	The flex direction. Default is `FlexDirection.Row`.

See also
`FlexDirection`

gap

Cmn

Added in 1.11.0-beta02

fun gap(value: Dp): Unit

Sets both rowGap and columnGap to the same value.

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

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
`value: Dp`	The gap size to apply to both row and column gaps.

See also
`rowGap`
`columnGap`

gap

Cmn

Added in 1.11.0-beta02

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

Sets rowGap and columnGap to different values.

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: Dp`	The vertical spacing (Y-axis).
`column: Dp`	The horizontal spacing (X-axis).

See also
`rowGap`
`columnGap`

justifyContent

Cmn

Added in 1.11.0-beta02

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.

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.

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.material.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: FlexJustifyContent`	The justify content value. Default is `FlexJustifyContent.Start`.

See also
`FlexJustifyContent`

rowGap

Cmn

Added in 1.11.0-beta02

fun rowGap(value: Dp): Unit

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.

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: Dp`	The vertical gap size. Default is `0.dp`.

See also
`columnGap`
`gap`

wrap

Cmn

Added in 1.11.0-beta02

fun wrap(value: FlexWrap): Unit

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.

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: FlexWrap`	The wrap behavior. Default is `FlexWrap.NoWrap`.

See also
`FlexWrap`

Public properties

constraints

Cmn

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.

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
`Constraints`