FlexConfigScope

Artifact: androidx.compose.foundation:foundation-layout

Added in 1.11.0

Cmn

@ExperimentalFlexBoxApi
sealed interface FlexConfigScope : Density

Scope for configuring flex item properties within a FlexBox.

All configuration functions are called during the layout/measure phase, not during composition.

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.FlexAlignSelf
import androidx.compose.foundation.layout.FlexBox
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

FlexBox {
    Box(
        Modifier.flex {
            grow(1f) // Grow to fill space
            shrink(0f) // Don't shrink below basis
            basis(100.dp) // Start at 100dp
            alignSelf(FlexAlignSelf.Center) // Center this item
        }
    )
}

See also
`FlexConfig`

Summary

Public functions
`Unit`	`alignSelf(alignmentLine: AlignmentLine)` Aligns this item to a specific baseline within its line, overriding the container's alignment.	Cmn
`Unit`	`alignSelf(alignmentLineBlock: (Measured) -> Int)` Aligns this item to a custom baseline computed from the measured item within its line, overriding the container's alignment.	Cmn
`Unit`	`alignSelf(value: FlexAlignSelf)` Overrides the container's `FlexBoxConfigScope.alignItems` for this specific item.	Cmn
`Unit`	`basis(value: Dp)` Sets the basis to a fixed Dp value.	Cmn
`Unit`	`basis(value: FlexBasis)` Sets the initial main axis size of this item before any free space distribution (grow or shrink) is calculated.	Cmn
`Unit`	`basis(value: @FloatRange(from = 0.0, to = 1.0) Float)` ◦ Sets the basis to a fraction of the container's main axis size.This is a convenience function equivalent to `basis(FlexBasis.Percent(value))`.	Cmn
`Unit`	`grow(value: @FloatRange(from = 0.0) Float)` Sets the flex grow factor, determining how much of the remaining positive free space this item should consume relative to its siblings.	Cmn
`Unit`	`order(value: Int)` ◦ Sets the visual order of this item relative to its siblings.	Cmn
`Unit`	`shrink(value: @FloatRange(from = 0.0) Float)` ◦ Sets the flex shrink factor, determining how much this item should shrink relative to its siblings when there is not enough space.	Cmn

Public properties
`Int`	`flexBoxCrossAxisMax` The maximum size of the FlexBox container along the cross axis.	Cmn
`Int`	`flexBoxCrossAxisMin` The minimum size of the FlexBox container along the cross axis.	Cmn
`Int`	`flexBoxMainAxisMax` The maximum size of the FlexBox container along the main axis.	Cmn
`Int`	`flexBoxMainAxisMin` The minimum size of the FlexBox container along the main axis.	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

alignSelf

Cmn

Added in 1.11.0

fun alignSelf(alignmentLine: AlignmentLine): Unit

Aligns this item to a specific baseline within its line, overriding the container's alignment.

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.FlexBox
import androidx.compose.foundation.layout.FlexConfig
import androidx.compose.material.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.layout.LastBaseline

// FlexConfig can be defined as top-level constants
val BaselineAligned = FlexConfig { alignSelf(LastBaseline) }

FlexBox {
    Text("Normal alignment")
    Text("Baseline aligned", modifier = Modifier.flex(BaselineAligned))
}

Parameters
`alignmentLine: AlignmentLine`	The alignment line to use (e.g., `FirstBaseline`, `LastBaseline`).

See also
`AlignmentLine`

alignSelf

Cmn

Added in 1.11.0

fun alignSelf(alignmentLineBlock: (Measured) -> Int): Unit

Aligns this item to a custom baseline computed from the measured item within its line, overriding the container's alignment.

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.FlexBox
import androidx.compose.foundation.layout.size
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.AlignmentLine
import androidx.compose.ui.layout.FirstBaseline
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

FlexBox {
    Box(
        Modifier.size(50.dp).background(Color.Blue).flex {
            alignSelf { measured ->
                val baseline = measured[FirstBaseline]
                if (baseline != AlignmentLine.Unspecified) baseline + 5
                else measured.measuredHeight
            }
        }
    )
}

Parameters
`alignmentLineBlock: (Measured) -> Int`	A function that computes the baseline from a `Measured` item.

alignSelf

Cmn

Added in 1.11.0

fun alignSelf(value: FlexAlignSelf): Unit

Overrides the container's FlexBoxConfigScope.alignItems for this specific item.

This controls how the individual item is positioned perpendicular to the main axis within its respective line.

FlexAlignSelf.Auto: Inherits the container's alignment (default).
FlexAlignSelf.Start: Aligns to the cross-start edge of its line.
FlexAlignSelf.End: Aligns to the cross-end edge of its line.
FlexAlignSelf.Center: Centers along the cross axis within its line.
FlexAlignSelf.Stretch: Stretches to fill the line's cross-axis size.
FlexAlignSelf.Baseline: Aligns by baseline within its line.

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.FlexAlignItems
import androidx.compose.foundation.layout.FlexAlignSelf
import androidx.compose.foundation.layout.FlexBox
import androidx.compose.foundation.layout.FlexBoxConfig
import androidx.compose.foundation.layout.FlexConfig
import androidx.compose.foundation.layout.FlexDirection
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
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 StartAligned = FlexBoxConfig {
    direction(FlexDirection.Row)
    alignItems(FlexAlignItems.Start)
}

// FlexConfig can be defined as top-level constants
val CenterSelf = FlexConfig { alignSelf(FlexAlignSelf.Center) }

FlexBox(modifier = Modifier.fillMaxWidth().height(100.dp), config = StartAligned) {
    Box(Modifier.size(50.dp).background(Color.Red)) // Aligned to start
    Box(Modifier.size(50.dp).background(Color.Green).flex(CenterSelf)) // Centered
    Box(Modifier.size(50.dp).background(Color.Blue)) // Aligned to start
}

Parameters
`value: FlexAlignSelf`	The alignment for this item. Default is `FlexAlignSelf.Auto`.

See also
`FlexAlignSelf`
`alignItems`

basis

Cmn

Added in 1.11.0

fun basis(value: Dp): Unit

Sets the basis to a fixed Dp value. This is a convenience function equivalent to basis(FlexBasis.Dp(value)).

Parameters
`value: Dp`	The basis size in Dp.

See also
`Dp`

basis

Cmn

Added in 1.11.0

fun basis(value: FlexBasis): Unit

Sets the initial main axis size of this item before any free space distribution (grow or shrink) is calculated.

The basis determines the starting size before grow and shrink are applied:

FlexBasis.Auto: Uses the item's explicitly set size, or falls back to its natural content size.
FlexBasis.Dp: Uses a fixed exact size in dp.
FlexBasis.Percent: Uses a fraction of the container's main axis size.

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.FlexBasis
import androidx.compose.foundation.layout.FlexBox
import androidx.compose.foundation.layout.FlexConfig
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

// FlexConfig can be defined as top-level constants
val FixedBasisGrow = FlexConfig {
    basis(FlexBasis.Dp(100.dp))
    grow(1f)
}

val PercentBasis = FlexConfig { basis(FlexBasis.Percent(0.5f)) }

FlexBox(modifier = Modifier.fillMaxWidth()) {
    Box(Modifier.height(50.dp).background(Color.Red).flex(FixedBasisGrow))
    Box(Modifier.height(50.dp).background(Color.Blue).flex(PercentBasis))
}

Parameters
`value: FlexBasis`	The basis value. Default is `FlexBasis.Auto`.

See also
`FlexBasis`

basis

Cmn

Added in 1.11.0

fun basis(value: @FloatRange(from = 0.0, to = 1.0) Float): Unit

◦ Sets the basis to a fraction of the container's main axis size.This is a convenience function equivalent to basis(FlexBasis.Percent(value)).

Parameters
`value: @FloatRange(from = 0.0, to = 1.0) Float`	A value between 0.0 and 1.0 representing the fraction of the container's size.

See also
`Percent`

grow

Cmn

Added in 1.11.0

fun grow(value: @FloatRange(from = 0.0) Float): Unit

Sets the flex grow factor, determining how much of the remaining positive free space this item should consume relative to its siblings.

When the sum of all item base sizes is less than the container's main axis size, the leftover space is distributed among items proportional to their growth factors. An item with a grow factor of 0f (the default) will not grow beyond its base size.

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.FlexBox
import androidx.compose.foundation.layout.FlexConfig
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

// FlexConfig can be defined as top-level constants
val Grow1 = FlexConfig { grow(1f) }
val Grow2 = FlexConfig { grow(2f) }

FlexBox(modifier = Modifier.fillMaxWidth()) {
    // Free space distributed 1:2
    Box(Modifier.height(50.dp).background(Color.Red).flex(Grow1)) // Gets 1/3
    Box(Modifier.height(50.dp).background(Color.Blue).flex(Grow2)) // Gets 2/3
}

Parameters
`value: @FloatRange(from = 0.0) Float`	The growth factor. Must be non-negative. Default is 0f.

Throws
`IllegalArgumentException`	if `value` is negative.

See also
`shrink`
`basis`

order

Cmn

Added in 1.11.0

fun order(value: Int): Unit

◦ Sets the visual order of this item relative to its siblings.

Items are sorted by their order value in ascending order before layout. Lower values are placed first, starting from the main-start edge of the container. Note that in reverse directions (like FlexDirection.RowReverse), the main-start edge is visually flipped (e.g., to the right side of the container).

The sorting is stable; items with the same order maintain the exact sequence in which they were emitted in the composition. By default, all items have an order of 0. You can use negative values to move items before default-ordered items, or positive values to move them after.

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.FlexBox
import androidx.compose.foundation.layout.FlexConfig
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

// FlexConfig can be defined as top-level constants
val First = FlexConfig { order(-1) }
val Second = FlexConfig { order(1) }
val Third = FlexConfig { order(2) }

FlexBox {
    Box(Modifier.size(50.dp).background(Color.Red).flex(Third)) // Displayed last
    Box(Modifier.size(50.dp).background(Color.Green)) // order = 0, displayed second
    Box(Modifier.size(50.dp).background(Color.Blue).flex(Second)) // Displayed third
    Box(Modifier.size(50.dp).background(Color.Yellow).flex(First)) // Displayed first
}
// Visual order: Yellow, Green, Blue, Red

Parameters
`value: Int`	The order value. Default is 0.

shrink

Cmn

Added in 1.11.0

fun shrink(value: @FloatRange(from = 0.0) Float): Unit

◦ Sets the flex shrink factor, determining how much this item should shrink relative to its siblings when there is not enough space.

When the sum of all item base sizes exceeds the container's main axis size, items will shrink proportionally based on their shrink factor multiplied by their base size. An item with a shrink factor of 0f will not shrink.

Note: Items will never shrink below their minimum intrinsic size. If the total minimum size of all items exceeds the container's size, the items will overflow visually on main axis. Use Modifier.clipToBounds on the container if you need to hide the overflow.

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.FlexBox
import androidx.compose.foundation.layout.FlexConfig
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.width
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

// FlexConfig can be defined as top-level constants
val NoShrink = FlexConfig { shrink(0f) }
val CanShrink = FlexConfig { shrink(1f) }

FlexBox(modifier = Modifier.width(150.dp)) {
    // Both items want 100dp but only 150dp available
    Box(
        Modifier.width(100.dp).height(50.dp).background(Color.Red).flex(NoShrink)
    ) // Keeps 100dp
    Box(
        Modifier.width(100.dp).height(50.dp).background(Color.Blue).flex(CanShrink)
    ) // Shrinks to 50dp
}

Parameters
`value: @FloatRange(from = 0.0) Float`	The shrink factor. Must be non-negative. Default is 1f.

Throws
`IllegalArgumentException`	if `value` is negative.

See also
`grow`
`basis`

Public properties

flexBoxCrossAxisMax

Cmn

Added in 1.11.0

val flexBoxCrossAxisMax: Int

The maximum size of the FlexBox container along the cross axis. Corresponds to Constraints.maxHeight for FlexDirection.Row/FlexDirection.RowReverse, or Constraints.maxWidth for FlexDirection.Column/FlexDirection.ColumnReverse.

flexBoxCrossAxisMin

Cmn

Added in 1.11.0

val flexBoxCrossAxisMin: Int

The minimum size of the FlexBox container along the cross axis. Corresponds to Constraints.minHeight for FlexDirection.Row/FlexDirection.RowReverse, or Constraints.minWidth for FlexDirection.Column/FlexDirection.ColumnReverse.

flexBoxMainAxisMax

Cmn

Added in 1.11.0

val flexBoxMainAxisMax: Int

The maximum size of the FlexBox container along the main axis. Corresponds to Constraints.maxWidth for FlexDirection.Row/FlexDirection.RowReverse, or Constraints.maxHeight for FlexDirection.Column/FlexDirection.ColumnReverse. Use this for responsive item sizing based on the container's available space.

flexBoxMainAxisMin

Cmn

Added in 1.11.0

val flexBoxMainAxisMin: Int

The minimum size of the FlexBox container along the main axis. Corresponds to Constraints.minWidth for FlexDirection.Row/FlexDirection.RowReverse, or Constraints.minHeight for FlexDirection.Column/FlexDirection.ColumnReverse.