FlexBoxConfigScope

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

Properties

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.

Functions

fun direction(value: FlexDirection)

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.

Parameters

fun wrap(value: FlexWrap)

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.

Parameters

fun justifyContent(value: FlexJustifyContent)

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.

Parameters

fun alignItems(value: FlexAlignItems)

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.

Parameters

fun alignItems(alignmentLine: AlignmentLine)

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

Parameters

fun alignItems(alignmentLineBlock: (Measured) -> Int)

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.

Parameters

fun alignContent(value: FlexAlignContent)

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.

Parameters

fun rowGap(value: Dp)

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.

Parameters

fun columnGap(value: Dp)

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.

Parameters

fun gap(value: Dp)

Sets both rowGap and columnGap to the same value.

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

Parameters

fun gap(row: Dp, column: Dp)

Sets rowGap and columnGap to different values.

Parameters