Flex/com.j0y.flex/FlexBox

FlexBox

@Composable

fun FlexBox(modifier: Modifier = Modifier, containerStyle: FlexContainerStyle = FlexContainerStyle(), content: @Composable FlexBoxScope.() -> Unit)(source)

A composable that lays out its content children following CSS Flexbox rules.

Uses the low-level Layout composable. Each child's flex item properties are configured via FlexBoxScope.flexItem inside the content lambda.

Children are measured using intrinsic measurements — Measurable.maxIntrinsicWidth and Measurable.maxIntrinsicHeight — so that each child is measured exactly once with the flex-resolved constraints.

Example:

FlexBox(
    containerStyle = FlexContainerStyle(
        justifyContent = JustifyContent.SpaceBetween,
        flexWrap = FlexWrap.Wrap,
    )
) {
    Box(Modifier.flexItem(FlexItemStyle(flexGrow = 1f)).height(48.dp))
    Box(Modifier.flexItem(FlexItemStyle(flexGrow = 2f)).height(48.dp))
}

Parameters

modifier

Applied to the flex container itself.

containerStyle

Flex container configuration (direction, wrap, alignment, gap).

content

Children. Use FlexBoxScope.flexItem on each child to set its FlexItemStyle.

@Composable

fun FlexBox(modifier: Modifier = Modifier, flexDirection: FlexDirection = FlexDirection.Row, flexWrap: FlexWrap = FlexWrap.NoWrap, justifyContent: JustifyContent = JustifyContent.FlexStart, alignItems: AlignItems = AlignItems.Stretch, alignContent: AlignContent = AlignContent.Stretch, rowGap: Float = 0.0f, columnGap: Float = 0.0f, overflow: Overflow = Overflow.Visible, content: @Composable FlexBoxScope.() -> Unit)(source)

Overload of FlexBox that accepts FlexContainerStyle parameters directly instead of a pre-built FlexContainerStyle instance.