FlexConfigScope

Interface

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

Properties

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

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

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

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

Functions

fun alignSelf(value: FlexAlignSelf)

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.

Parameters

valueThe alignment for this item. Default is FlexAlignSelf.Auto.
fun alignSelf(alignmentLine: AlignmentLine)

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

Parameters

alignmentLineThe alignment line to use (e.g., FirstBaseline, LastBaseline).
fun alignSelf(alignmentLineBlock: (Measured) -> Int)

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

Parameters

alignmentLineBlockA function that computes the baseline from a Measured item.
fun order(value: Int)

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

Parameters

valueThe order value. Default is 0.
fun grow(@FloatRange(from = 0.0) value: Float)

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.

Parameters

valueThe growth factor. Must be non-negative. Default is 0f.
fun shrink(@FloatRange(from = 0.0) value: Float)

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

Parameters

valueThe shrink factor. Must be non-negative. Default is 1f.
fun basis(value: FlexBasis)

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.

Parameters

valueThe basis value. Default is FlexBasis.Auto.
fun basis(value: Dp)

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

Parameters

valueThe basis size in Dp.
fun basis(@FloatRange(from = 0.0, to = 1.0) value: 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)).

Parameters

valueA value between 0.0 and 1.0 representing the fraction of the container's size.

Code Examples

FlexConfigScopeSample

@OptIn(ExperimentalFlexBoxApi::class)
@Composable
fun FlexConfigScopeSample() {
    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
            }
        )
    }
}