# FlexConfigScope

Artifact: [androidx.compose.foundation:foundation-layout](https://developer.android.com/jetpack/androidx/releases/compose-foundation) [View Source](https://cs.android.com/search?q=file:androidx/compose/foundation/layout/FlexBox.kt+class:androidx.compose.foundation.layout.FlexConfigScope) Added in [1.11.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.11.0) Common/AllAndroid/JVM
- Cmn

  ```
  sealed interface FlexConfigScope : Density
  ```

*** ** * ** ***

Scope for configuring flex item properties within a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBox.composable#FlexBox(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.FlexBoxConfig,kotlin.Function1)`.

All configuration functions are called during the layout/measure phase, not during composition.

```kotlin
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.FlexAlignSelf
import androidx.compose.foundation.layout.FlexBox
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

FlexBox {
    Box(
        Modifier.flex {
            grow(1f) // Grow to fill space
            shrink(0f) // Don't shrink below basis
            basis(100.dp) // Start at 100dp
            alignSelf(FlexAlignSelf.Center) // Center this item
        }
    )
}
```

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexConfig` |   |

## Summary

| ### Public functions |
|---|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexConfigScope#alignSelf(androidx.compose.ui.layout.AlignmentLine)(alignmentLine: https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/AlignmentLine)` Aligns this item to a specific baseline within its line, overriding the container's alignment. | Cmn |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexConfigScope#alignSelf(kotlin.Function1)(alignmentLineBlock: (https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/Measured) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html)` Aligns this item to a custom baseline computed from the measured item within its line, overriding the container's alignment. | Cmn |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexConfigScope#alignSelf(androidx.compose.foundation.layout.FlexAlignSelf)(value: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexAlignSelf)` Overrides the container's `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBoxConfigScope#alignItems(androidx.compose.foundation.layout.FlexAlignItems)` for this specific item. | Cmn |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexConfigScope#basis(androidx.compose.ui.unit.Dp)(value: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp)` Sets the basis to a fixed Dp value. | Cmn |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexConfigScope#basis(androidx.compose.foundation.layout.FlexBasis)(value: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBasis)` Sets the initial main axis size of this item before any free space distribution (grow or shrink) is calculated. | Cmn |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexConfigScope#basis(kotlin.Float)(value: @https://developer.android.com/reference/kotlin/androidx/annotation/FloatRange(from = 0.0, to = 1.0) https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html)` ◦ Sets the basis to a fraction of the container's main axis size.This is a convenience function equivalent to `basis(FlexBasis.Percent(value))`. | Cmn |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexConfigScope#grow(kotlin.Float)(value: @https://developer.android.com/reference/kotlin/androidx/annotation/FloatRange(from = 0.0) https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html)` Sets the flex grow factor, determining how much of the remaining positive free space this item should consume relative to its siblings. | Cmn |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexConfigScope#order(kotlin.Int)(value: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html)` ◦ Sets the visual order of this item relative to its siblings. | Cmn |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexConfigScope#shrink(kotlin.Float)(value: @https://developer.android.com/reference/kotlin/androidx/annotation/FloatRange(from = 0.0) https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html)` ◦ Sets the flex shrink factor, determining how much this item should shrink relative to its siblings when there is not enough space. | Cmn |

| ### Public properties |
|---|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexConfigScope#flexBoxCrossAxisMaxPx()` The maximum size of the FlexBox container along the cross axis, in pixels. | Cmn |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexConfigScope#flexBoxCrossAxisMinPx()` The minimum size of the FlexBox container along the cross axis, in pixels. | Cmn |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexConfigScope#flexBoxMainAxisMaxPx()` The maximum size of the FlexBox container along the main axis, in pixels. | Cmn |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html` | `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexConfigScope#flexBoxMainAxisMinPx()` The minimum size of the FlexBox container along the main axis, in pixels. | Cmn |

### Inherited functions

From [androidx.compose.ui.unit.Density](https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Density) `open https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html` `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp.https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Density#(androidx.compose.ui.unit.Dp).roundToPx()()`

Convert `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp` to `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html` by rounding
Cmn `open https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html` `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/TextUnit.https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Density#(androidx.compose.ui.unit.TextUnit).roundToPx()()`

Convert Sp to `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html` by rounding
Cmn `open https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp` `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html.https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Density#(kotlin.Int).toDp()()`

Convert an `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html` pixel value to `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp`.
Cmn `open https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp` `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html.https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Density#(kotlin.Float).toDp()()`

Convert a `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html` pixel value to a Dp
Cmn `open https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/DpSize` `https://developer.android.com/reference/kotlin/androidx/compose/ui/geometry/Size.https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Density#(androidx.compose.ui.geometry.Size).toDpSize()()`

Convert a `https://developer.android.com/reference/kotlin/androidx/compose/ui/geometry/Size` to a `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/DpSize`.
Cmn `open https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html` `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp.https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Density#(androidx.compose.ui.unit.Dp).toPx()()`

Convert `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp` to pixels.
Cmn `open https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html` `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/TextUnit.https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Density#(androidx.compose.ui.unit.TextUnit).toPx()()`

Convert Sp to pixels.
Cmn `open https://developer.android.com/reference/kotlin/androidx/compose/ui/geometry/Rect` `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/DpRect.https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Density#(androidx.compose.ui.unit.DpRect).toRect()()`

Convert a `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/DpRect` to a `https://developer.android.com/reference/kotlin/androidx/compose/ui/geometry/Rect`.
Cmn `open https://developer.android.com/reference/kotlin/androidx/compose/ui/geometry/Size` `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/DpSize.https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Density#(androidx.compose.ui.unit.DpSize).toSize()()`

Convert a `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/DpSize` to a `https://developer.android.com/reference/kotlin/androidx/compose/ui/geometry/Size`.
Cmn `open https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/TextUnit` `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html.https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Density#(kotlin.Int).toSp()()`

Convert an `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html` pixel value to Sp.
Cmn `open https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/TextUnit` `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html.https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Density#(kotlin.Float).toSp()()`

Convert a `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html` pixel value to a Sp
Cmn From [androidx.compose.ui.unit.FontScaling](https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/FontScaling) `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp` `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/TextUnit.https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/FontScaling#(androidx.compose.ui.unit.TextUnit).toDp()()`

Convert Sp to `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp`.
Cmn `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/TextUnit` `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp.https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/FontScaling#(androidx.compose.ui.unit.Dp).toSp()()`

Convert `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp` to Sp.
Cmn

### Inherited properties

From [androidx.compose.ui.unit.Density](https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Density) `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html` `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Density#density()`

The logical density of the display.
Cmn From [androidx.compose.ui.unit.FontScaling](https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/FontScaling) `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html` `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/FontScaling#fontScale()`

Current user preference for the scaling factor for fonts.
Cmn

## Public functions

### alignSelf

Cmn Added in [1.11.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.11.0)

```
fun alignSelf(alignmentLine: AlignmentLine): Unit
```

Aligns this item to a specific baseline within its line, overriding the container's alignment.

```kotlin
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.FlexBox
import androidx.compose.foundation.layout.FlexConfig
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.layout.LastBaseline

// FlexConfig can be defined as top-level constants
val BaselineAligned = FlexConfig { alignSelf(LastBaseline) }

FlexBox {
    Text("Normal alignment")
    Text("Baseline aligned", modifier = Modifier.flex(BaselineAligned))
}
```

| Parameters |
|---|---|
| `alignmentLine: https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/AlignmentLine` | The alignment line to use (e.g., `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/package-summary#FirstBaseline()`, `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/package-summary#LastBaseline()`). |

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/AlignmentLine` |   |

### alignSelf

Cmn Added in [1.11.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.11.0)

```
fun alignSelf(alignmentLineBlock: (Measured) -> Int): Unit
```

Aligns this item to a custom baseline computed from the measured item within its line, overriding the container's alignment.

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.FlexBox
import androidx.compose.foundation.layout.size
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.AlignmentLine
import androidx.compose.ui.layout.FirstBaseline
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

FlexBox {
    Box(
        Modifier.size(50.dp).background(Color.Blue).flex {
            alignSelf { measured ->
                val baseline = measured[FirstBaseline]
                if (baseline != AlignmentLine.Unspecified) baseline + 5
                else measured.measuredHeight
            }
        }
    )
}
```

| Parameters |
|---|---|
| `alignmentLineBlock: (https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/Measured) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html` | A function that computes the baseline from a `https://developer.android.com/reference/kotlin/androidx/compose/ui/layout/Measured` item. |

### alignSelf

Cmn Added in [1.11.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.11.0)

```
fun alignSelf(value: FlexAlignSelf): Unit
```

Overrides the container's `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBoxConfigScope#alignItems(androidx.compose.foundation.layout.FlexAlignItems)` for this specific item.

This controls how the individual item is positioned perpendicular to the main axis within its respective line.

- `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexAlignSelf#Auto()`: Inherits the container's alignment (default).

- `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexAlignSelf#Start()`: Aligns to the `cross-start` edge of its line.

- `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexAlignSelf#End()`: Aligns to the `cross-end` edge of its line.

- `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexAlignSelf#Center()`: Centers along the cross axis within its line.

- `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexAlignSelf#Stretch()`: Stretches to fill the line's cross-axis size.

- `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexAlignSelf#Baseline()`: Aligns by baseline within its line.

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.FlexAlignItems
import androidx.compose.foundation.layout.FlexAlignSelf
import androidx.compose.foundation.layout.FlexBox
import androidx.compose.foundation.layout.FlexBoxConfig
import androidx.compose.foundation.layout.FlexConfig
import androidx.compose.foundation.layout.FlexDirection
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

// Can be extracted to a top-level FlexBoxConfig
val StartAligned = FlexBoxConfig {
    direction(FlexDirection.Row)
    alignItems(FlexAlignItems.Start)
}

// FlexConfig can be defined as top-level constants
val CenterSelf = FlexConfig { alignSelf(FlexAlignSelf.Center) }

FlexBox(modifier = Modifier.fillMaxWidth().height(100.dp), config = StartAligned) {
    Box(Modifier.size(50.dp).background(Color.Red)) // Aligned to start
    Box(Modifier.size(50.dp).background(Color.Green).flex(CenterSelf)) // Centered
    Box(Modifier.size(50.dp).background(Color.Blue)) // Aligned to start
}
```

| Parameters |
|---|---|
| `value: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexAlignSelf` | The alignment for this item. Default is `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexAlignSelf#Auto()`. |

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexAlignSelf` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBoxConfigScope#alignItems(androidx.compose.foundation.layout.FlexAlignItems)` |   |

### basis

Cmn Added in [1.11.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.11.0)

```
fun basis(value: Dp): Unit
```

Sets the basis to a fixed Dp value. This is a convenience function equivalent to `basis(FlexBasis.Dp(value))`.

| Parameters |
|---|---|
| `value: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp` | The basis size in Dp. |

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBasis#Dp(androidx.compose.ui.unit.Dp)` |   |

### basis

Cmn Added in [1.11.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.11.0)

```
fun basis(value: FlexBasis): Unit
```

Sets the initial main axis size of this item before any free space distribution (grow or shrink) is calculated.

The basis determines the starting size before `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexConfigScope#grow(kotlin.Float)` and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexConfigScope#shrink(kotlin.Float)` are applied:

- `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBasis#Auto()`: Uses the item's explicitly set size, or falls back to its natural content size.

- `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBasis#Dp(androidx.compose.ui.unit.Dp)`: Uses a fixed exact size in dp.

- `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBasis#Percent(kotlin.Float)`: Uses a fraction of the container's main axis size.

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.FlexBasis
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.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

// FlexConfig can be defined as top-level constants
val FixedBasisGrow = FlexConfig {
    basis(FlexBasis.Dp(100.dp))
    grow(1f)
}

val PercentBasis = FlexConfig { basis(FlexBasis.Percent(0.5f)) }

FlexBox(modifier = Modifier.fillMaxWidth()) {
    Box(Modifier.height(50.dp).background(Color.Red).flex(FixedBasisGrow))
    Box(Modifier.height(50.dp).background(Color.Blue).flex(PercentBasis))
}
```

| Parameters |
|---|---|
| `value: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBasis` | The basis value. Default is `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBasis#Auto()`. |

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBasis` |   |

### basis

Cmn Added in [1.11.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.11.0)

```
fun basis(value: @FloatRange(from = 0.0, to = 1.0) Float): Unit
```

◦ Sets the basis to a fraction of the container's main axis size.This is a convenience function equivalent to `basis(FlexBasis.Percent(value))`.

| Parameters |
|---|---|
| `value: @https://developer.android.com/reference/kotlin/androidx/annotation/FloatRange(from = 0.0, to = 1.0) https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html` | A value between 0.0 and 1.0 representing the fraction of the container's size. |

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBasis#Percent(kotlin.Float)` |   |

### grow

Cmn Added in [1.11.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.11.0)

```
fun grow(value: @FloatRange(from = 0.0) Float): Unit
```

Sets the flex grow factor, determining how much of the remaining positive free space this item should consume relative to its siblings.

When the sum of all item base sizes is less than the container's main axis size, the leftover space is distributed among items proportional to their growth factors. An item with a grow factor of 0f (the default) will not grow beyond its base size.

If no grow factor is configured, an item with a main-axis fill modifier (for example, `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/fillMaxWidth.modifier#(androidx.compose.ui.Modifier).fillMaxWidth(kotlin.Float)` in a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexDirection#Row()`) uses its fill fraction as the grow factor. Calling this function always takes precedence over fill modifiers; in particular, an explicit `grow(0f)` keeps the item from growing even when a fill modifier is present.

```kotlin
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.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

// FlexConfig can be defined as top-level constants
val Grow1 = FlexConfig { grow(1f) }
val Grow2 = FlexConfig { grow(2f) }

FlexBox(modifier = Modifier.fillMaxWidth()) {
    // Free space distributed 1:2
    Box(Modifier.height(50.dp).background(Color.Red).flex(Grow1)) // Gets 1/3
    Box(Modifier.height(50.dp).background(Color.Blue).flex(Grow2)) // Gets 2/3
}
```

| Parameters |
|---|---|
| `value: @https://developer.android.com/reference/kotlin/androidx/annotation/FloatRange(from = 0.0) https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html` | The growth factor. Must be non-negative. Default is 0f. |

| Throws |
|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-illegal-argument-exception/index.html` | if `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexConfigScope#grow(kotlin.Float)` is negative. |

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexConfigScope#shrink(kotlin.Float)` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexConfigScope#basis(androidx.compose.foundation.layout.FlexBasis)` |   |

### order

Cmn Added in [1.11.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.11.0)

```
fun order(value: Int): Unit
```

◦ Sets the visual order of this item relative to its siblings.

Items are sorted by their order value in ascending order before layout. Lower values are placed first, starting from the main-start edge of the container. Note that in reverse directions (like `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexDirection#RowReverse()`), the main-start edge is visually flipped (e.g., to the right side of the container).

The sorting is stable; items with the same order maintain the exact sequence in which they were emitted in the composition. By default, all items have an order of 0. You can use negative values to move items before default-ordered items, or positive values to move them after.

```kotlin
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
import androidx.compose.ui.unit.sp

// FlexConfig can be defined as top-level constants
val First = FlexConfig { order(-1) }
val Second = FlexConfig { order(1) }
val Third = FlexConfig { order(2) }

FlexBox {
    Box(Modifier.size(50.dp).background(Color.Red).flex(Third)) // Displayed last
    Box(Modifier.size(50.dp).background(Color.Green)) // order = 0, displayed second
    Box(Modifier.size(50.dp).background(Color.Blue).flex(Second)) // Displayed third
    Box(Modifier.size(50.dp).background(Color.Yellow).flex(First)) // Displayed first
}
// Visual order: Yellow, Green, Blue, Red
```

| Parameters |
|---|---|
| `value: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html` | The order value. Default is 0. |

### shrink

Cmn Added in [1.11.0](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.11.0)

```
fun shrink(value: @FloatRange(from = 0.0) Float): Unit
```

◦ Sets the flex shrink factor, determining how much this item should shrink relative to its siblings when there is not enough space.

When the sum of all item base sizes exceeds the container's main axis size, items will shrink proportionally based on their shrink factor multiplied by their base size. An item with a shrink factor of 0f will not shrink.

**Note:** Items will never shrink below their minimum intrinsic size. If the total minimum size of all items exceeds the container's size, the items will overflow visually on main axis. Use `https://developer.android.com/reference/kotlin/androidx/compose/ui/draw/clipToBounds.modifier#(androidx.compose.ui.Modifier).clipToBounds()` on the container if you need to hide the overflow.

```kotlin
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.height
import androidx.compose.foundation.layout.width
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
val NoShrink = FlexConfig { shrink(0f) }
val CanShrink = FlexConfig { shrink(1f) }

FlexBox(modifier = Modifier.width(150.dp)) {
    // Both items want 100dp but only 150dp available
    Box(
        Modifier.width(100.dp).height(50.dp).background(Color.Red).flex(NoShrink)
    ) // Keeps 100dp
    Box(
        Modifier.width(100.dp).height(50.dp).background(Color.Blue).flex(CanShrink)
    ) // Shrinks to 50dp
}
```

| Parameters |
|---|---|
| `value: @https://developer.android.com/reference/kotlin/androidx/annotation/FloatRange(from = 0.0) https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html` | The shrink factor. Must be non-negative. Default is 1f. |

| Throws |
|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-illegal-argument-exception/index.html` | if `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexConfigScope#shrink(kotlin.Float)` is negative. |

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexConfigScope#grow(kotlin.Float)` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexConfigScope#basis(androidx.compose.foundation.layout.FlexBasis)` |   |

## Public properties

### flexBoxCrossAxisMaxPx

Cmn Added in [1.13.0-rc01](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.13.0-rc01)

```
val flexBoxCrossAxisMaxPx: Int
```

The maximum size of the FlexBox container along the cross axis, in pixels. Corresponds to `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints#maxHeight()` for `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexDirection#Row()`/`https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexDirection#RowReverse()`, or `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints#maxWidth()` for `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexDirection#Column()`/`https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexDirection#ColumnReverse()`.

### flexBoxCrossAxisMinPx

Cmn Added in [1.13.0-rc01](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.13.0-rc01)

```
val flexBoxCrossAxisMinPx: Int
```

The minimum size of the FlexBox container along the cross axis, in pixels. Corresponds to `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints#minHeight()` for `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexDirection#Row()`/`https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexDirection#RowReverse()`, or `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints#minWidth()` for `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexDirection#Column()`/`https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexDirection#ColumnReverse()`.

### flexBoxMainAxisMaxPx

Cmn Added in [1.13.0-rc01](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.13.0-rc01)

```
val flexBoxMainAxisMaxPx: Int
```

The maximum size of the FlexBox container along the main axis, in pixels. Corresponds to `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints#maxWidth()` for `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexDirection#Row()`/`https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexDirection#RowReverse()`, or `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints#maxHeight()` for `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexDirection#Column()`/`https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexDirection#ColumnReverse()`. Use this for responsive item sizing based on the container's available space.

### flexBoxMainAxisMinPx

Cmn Added in [1.13.0-rc01](https://developer.android.com/jetpack/androidx/releases/compose-foundation#1.13.0-rc01)

```
val flexBoxMainAxisMinPx: Int
```

The minimum size of the FlexBox container along the main axis, in pixels. Corresponds to `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints#minWidth()` for `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexDirection#Row()`/`https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexDirection#RowReverse()`, or `https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Constraints#minHeight()` for `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexDirection#Column()`/`https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexDirection#ColumnReverse()`.