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

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.FlexBox
import androidx.compose.foundation.layout.FlexConfig
import androidx.compose.foundation.layout.size
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

// 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))
}
See also
FlexBox
FlexConfig

Summary

Public functions
Modifier
Modifier.flex(flexConfig: FlexConfig)

Applies flex item properties using a FlexConfig.
Cmn
open Modifier
Modifier.flex(flexConfig: FlexConfigScope.() -> Unit)

Applies flex item properties using a configuration lambda.
Cmn

Public functions

flex

Cmn 
fun Modifier.flex(flexConfig: FlexConfig): Modifier

Applies flex item properties using a FlexConfig.

Example:

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.FlexAlignSelf
import androidx.compose.foundation.layout.FlexBox
import androidx.compose.foundation.layout.FlexConfig
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.size
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

// Define reusable FlexConfig - can be a top-level constant
val GrowAndCenter = FlexConfig {
    grow(1f)
    alignSelf(FlexAlignSelf.Center)
}

FlexBox(modifier = Modifier.fillMaxWidth().height(100.dp)) {
    Box(Modifier.size(50.dp).background(Color.Red))
    Box(Modifier.background(Color.Green).flex(GrowAndCenter))
    Box(Modifier.size(50.dp).background(Color.Blue))
}
Parameters
flexConfig: FlexConfig

The flex configuration to apply.
See also
FlexConfig

flex

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

Applies flex item properties using a configuration lambda.

Example:

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.FlexAlignSelf
import androidx.compose.foundation.layout.FlexBox
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

FlexBox(modifier = Modifier.fillMaxWidth()) {
    Box(
        Modifier.height(50.dp).background(Color.Blue).flex {
            grow(1f)
            shrink(0f)
            alignSelf(FlexAlignSelf.Center)
        }
    )
}
Parameters
flexConfig: FlexConfigScope.() -> Unit

A lambda that configures the flex properties.
See also
FlexConfigScope