FlexBoxConfigScope

Artifact: androidx.compose.foundation:foundation-layout

View Source

Added in 1.11.0-beta01

Common/AllAndroid/JVM

• Cmn

  @ExperimentalFlexBoxApi
  sealed interface FlexBoxConfigScope : Density

---

Scope for configuring FlexBox container properties.

All configuration functions are called during the layout/measure phase, not during composition. Changes to state-backed values trigger relayout, not recomposition.

See also
FlexBoxConfig

Summary

Public functions
Unit	alignContent(value: FlexAlignContent) Sets how multiple lines are aligned 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 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 row and column gaps 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 rows.	Cmn
Unit	wrap(value: FlexWrap) Sets whether children should wrap to new lines when they exceed the main axis size.	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-beta01

fun alignContent(value: FlexAlignContent): Unit

Sets how multiple lines are aligned 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 axis start

• FlexAlignContent.End: Lines packed toward the cross axis end

• 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-beta01

fun alignItems(alignmentLine: AlignmentLine): Unit

Aligns all items to a specific baseline.

This is equivalent to calling alignItems(FlexAlignItems.Baseline) but allows specifying which alignment line to use.

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 (e.g., FirstBaseline, LastBaseline).

See also
AlignmentLine
FirstBaseline
LastBaseline

alignItems

Cmn

Added in 1.11.0-beta01

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 is same as using 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-beta01

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:

• FlexAlignItems.Start: Items aligned to the cross axis start

• FlexAlignItems.End: Items aligned to the cross axis end

• FlexAlignItems.Center: Items centered along the cross axis

• FlexAlignItems.Stretch: Items stretched to fill the line's cross axis size

• FlexAlignItems.Baseline: Items aligned by their first baseline

Individual items can override this using FlexConfigScope.alignSelf.

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

fun columnGap(value: Dp): Unit

Sets the horizontal spacing between columns.

In a FlexDirection.Row layout, this is the space between items on main axis. In a FlexDirection.Column layout with FlexWrap.Wrap, this is the space between lines.

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 column gap size. Default is 0.dp.

See also
rowGap
gap

direction

Cmn

Added in 1.11.0-beta01

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, start to end (left to right in LTR)

• FlexDirection.RowReverse: Items placed horizontally, end to start

• 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-beta01

fun gap(value: Dp): Unit

Sets both rowGap and columnGap to the same value.

This is a convenience function for uniform spacing.

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

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

Sets row and column gaps 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 between rows.
column: Dp	The horizontal spacing between columns.

See also
rowGap
columnGap

justifyContent

Cmn

Added in 1.11.0-beta01

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:

• FlexJustifyContent.Start: Items packed toward the start

• FlexJustifyContent.End: Items packed toward the end

• 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-beta01

fun rowGap(value: Dp): Unit

Sets the vertical spacing between rows.

In a FlexDirection.Row layout with FlexWrap.Wrap, this is the space between lines. In a FlexDirection.Column layout, this is the space between items on main axis.

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 row gap size. Default is 0.dp.

See also
columnGap
gap

wrap

Cmn

Added in 1.11.0-beta01

fun wrap(value: FlexWrap): Unit

Sets whether children should wrap to new lines when they exceed the main axis size.

• FlexWrap.NoWrap: All items stay on one line, may overflow or shrink

• FlexWrap.Wrap: Items wrap to new lines toward the cross axis end

• FlexWrap.WrapReverse: Items wrap to new lines toward the cross axis start

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 adapt based on available 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