FlexBox

FlexBox

@Composable
public inline fun FlexBox(
    modifier: Modifier = Modifier,
    config: FlexBoxConfig = FlexBoxConfig,
    content: @Composable FlexBoxScope.() -> Unit,
)

A layout that aligns its children in a single direction (the main axis) and allows them to wrap onto multiple lines. FlexBox provides a highly configurable layout system, serving as a flexible superset of Row, Column, FlowRow, and FlowColumn.

The layout behavior of the container is controlled by the config parameter, which dictates the flex direction, wrapping behavior, alignment, and spacing. Individual children can further control their own flexibility (grow, shrink, and base size) and alignment using the FlexBoxScope.flex modifier.

Understanding FlexBox requires familiarity with its axes:

FlexBoxConfigScope.direction. Items are placed starting from the main-start edge and flowing toward the main-end edge. Defaults to FlexDirection.Row.

• Main Axis: The primary direction along which items are laid out, determined by the

RTL) and main-end is the end edge (right in LTR, left in RTL).

• For FlexDirection.Row: main-start is the layout's start edge (left in LTR, right in

left in

• For FlexDirection.RowReverse: main-start is the layout's end edge (right in LTR,
• RTL) and main-end is the start edge (left in LTR, right in RTL).
• For FlexDirection.Column: main-start is the top edge and main-end is the bottom edge.

the top edge.

• For FlexDirection.ColumnReverse: main-start is the bottom edge and main-end is

aligned within their lines, starting from the cross-start edge and flowing toward the cross-end edge.

• Cross Axis: The axis perpendicular to the main axis. Wrapped lines are added, and items are

cross-start is the top edge and cross-end is the bottom edge.

• For horizontal directions (FlexDirection.Row and FlexDirection.RowReverse):

cross-start is the layout's start edge and cross-end is the end edge.

• For vertical directions (FlexDirection.Column and FlexDirection.ColumnReverse):

Children can dictate how they share available space using the FlexBoxScope.flex modifier:

consume relative to its siblings. Defaults to 0f (no growth).

• FlexConfigScope.grow: Defines how much of the remaining positive free space the item should

the items exceed the container's main axis size. Defaults to 1f.

• FlexConfigScope.shrink: Defines how much the item should shrink when the combined sizes of

distribution (grow or shrink) is calculated. Defaults to FlexBasis.Auto.

• FlexConfigScope.basis: Sets the initial main axis size of the item before any free space

FlexBox provides granular control over the placement of items and lines:

wrap onto multiple lines when they exceed the available space. Defaults to FlexWrap.NoWrap.

• FlexBoxConfigScope.wrap: Controls whether items are forced onto a single line or allowed to

wrapping is enabled. Defaults to no limit.

• FlexBoxConfigScope.maxItemsInEachLine: Limits how many items can be placed in each line when

spacing them evenly). Defaults to FlexJustifyContent.Start.

• FlexBoxConfigScope.justifyContent: Distributes items along the main axis (for example,

example, centering them vertically within a Row). Defaults to FlexAlignItems.Start.

• FlexBoxConfigScope.alignItems: Aligns items within a specific line along the cross axis (for

FlexBoxConfigScope.alignItems. Defaults to FlexAlignSelf.Auto.

• FlexConfigScope.alignSelf: Allows an individual item to override the container's

only applies when wrapping is enabled. Defaults to FlexAlignContent.Start.

• FlexBoxConfigScope.alignContent:Distributes multiple wrapped lines along the cross axis. This

By default, children are placed in a horizontal row without wrapping. If wrapping is disabled (FlexWrap.NoWrap), children will shrink to fit the container if they have a shrink factor > 0. If children cannot shrink enough due to their minimum intrinsic sizes, they will visually overflow the container's bounds along the main axis. You can explicitly apply Modifier.clipToBounds on the FlexBox if you wish to hide overflowing content.

Parameters