FlexBoxScope

@LayoutScopeMarker
@JvmDefaultWithCompatibility
@ExperimentalFlexBoxApi
interface FlexBoxScope

Scope for the content of a FlexBox. Provides the flex modifier for configuring individual flex item properties.

Functions

fun Modifier.flex(flexConfig: FlexConfig): Modifier

Configures the flex properties of this element within the FlexBox using the provided FlexConfig.

Parameters

fun Modifier.flex(flexConfig: FlexConfigScope.() -> Unit): Modifier

Configures the flex properties of this element within the FlexBox using a configuration lambda.

This modifier allows you to specify how an individual item should share available space (grow, shrink, basis) and how it aligns itself along the cross axis (alignSelf).

Parameters

Code Examples

FlexBoxScopeSample

@OptIn(ExperimentalFlexBoxApi::class)
@Composable
fun FlexBoxScopeSample() {
    // FlexConfig can be defined as top-level constants for reuse
    val NoShrink = FlexConfig { shrink(0f) }
    FlexBox {
        // Basic item without flex configuration
        Box(Modifier.size(50.dp).background(Color.Red))
        // Item with inline flex configuration
        Box(Modifier.size(50.dp).background(Color.Green).flex { grow(1f) })
        // Item with reusable FlexConfig
        Box(Modifier.size(50.dp).background(Color.Blue).flex(NoShrink))
    }
}