FlexConfigScope

Artifact: androidx.compose.foundation:foundation-layout

View Source

Added in 1.11.0-beta01

Common/AllAndroid/JVM

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

Example:

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, overriding the container's alignment.	Cmn
Unit	alignSelf(alignmentLineBlock: (Measured) -> Int) Aligns this item to a custom baseline computed from the measured item.	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 size of this item before flex distribution.	Cmn
Unit	basis(value: @FloatRange(from = 0.0, to = 1.0) Float) Sets the basis to a percentage of the container's main axis size.	Cmn
Unit	grow(value: @FloatRange(from = 0.0) Float) Sets the flex grow factor, determining how much this item grows relative to siblings.	Cmn
Unit	order(value: Int) Sets the visual order of this item relative to siblings.	Cmn
Unit	shrink(value: @FloatRange(from = 0.0) Float) Sets the flex shrink factor, determining how much this item shrinks relative to siblings.	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-beta01

fun alignSelf(alignmentLine: AlignmentLine): Unit

Aligns this item to a specific baseline, 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-beta01

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

Aligns this item to a custom baseline computed from the measured item.

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

fun alignSelf(value: FlexAlignSelf): Unit

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

• FlexAlignSelf.Auto: Use the container's FlexBoxConfigScope.alignItems value

• FlexAlignSelf.Start: Align to the cross axis start

• FlexAlignSelf.End: Align to the cross axis end

• FlexAlignSelf.Center: Center along the cross axis

• FlexAlignSelf.Stretch: Stretch to fill the line's cross axis size

• FlexAlignSelf.Baseline: Align by baseline

Example:

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

fun basis(value: Dp): Unit

Sets the basis to a fixed Dp value.

This is equivalent to basis(FlexBasis.Dp(value)).

Parameters
value: Dp	The basis size in Dp.

See also
Dp

basis

Cmn

Added in 1.11.0-beta01

fun basis(value: FlexBasis): Unit

Sets the initial main size of this item before flex distribution.

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

• FlexBasis.Auto: Use the item's maximum intrinsic size

• FlexBasis.Dp: Use a fixed size in dp

• FlexBasis.Percent: Use a percentage of the container's main axis size

Example:

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

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

Sets the basis to a percentage of the container's main axis size.

This is 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 percentage.

See also
Percent

grow

Cmn

Added in 1.11.0-beta01

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

Sets the flex grow factor, determining how much this item grows relative to siblings.

When there is free space on the main axis, it is distributed among items proportional to their growth factors. Items with grow(0f) (the default) do not grow.

Note: Items will grow even with explicit size constraints (e.g., Modifier.width(100.dp)). Set grow(0f) to prevent growth.

Example:

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

order

Cmn

Added in 1.11.0-beta01

fun order(value: Int): Unit

Sets the visual order of this item relative to siblings.

Items are sorted by order value in ascending order before layout. Lower values appear first (closer to the start of the main axis). Items with the same order maintain their original declaration order.

Default is 0. Use negative values to move items before default-ordered items, or positive values to move items after.

Example:

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

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

Sets the flex shrink factor, determining how much this item shrinks relative to siblings.

When items overflow the main axis, they shrink proportional to their shrink factors multiplied by their base size. Items with shrink(0f) do not shrink.

Note: Items will not shrink below their minimum intrinsic size. Items with explicit size modifiers (e.g., Modifier.width(100.dp)) will not shrink.

Example:

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

Public properties

flexBoxCrossAxisMax

Cmn

Added in 1.11.0-beta01

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

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

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

flexBoxMainAxisMin

Cmn

Added in 1.11.0-beta01

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.