# FlexBox

Common/AllAndroid/JVM

## Functions summary

|---|---|---|
| `inline https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBox.composable#FlexBox(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.FlexBoxConfig,kotlin.Function1)( modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, config: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBoxConfig, content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBoxScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` A layout that aligns its children in a single direction (the main axis) and allows them to wrap onto multiple lines. | Cmn |

## Functions

### FlexBox

Cmn 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+function:FlexBox)

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

A layout that aligns its children in a single direction (the main axis) and allows them to wrap onto multiple lines. `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBox.composable#FlexBox(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.FlexBoxConfig,kotlin.Function1)` provides a highly configurable layout system, serving as a flexible superset of `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Row.composable#Row(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.ui.Alignment.Vertical,kotlin.Function1)`, `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Column.composable#Column(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.ui.Alignment.Horizontal,kotlin.Function1)`, `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlowRow.composable#FlowRow(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.ui.Alignment.Vertical,kotlin.Int,kotlin.Int,androidx.compose.foundation.layout.FlowRowOverflow,kotlin.Function1)`, and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlowColumn.composable#FlowColumn(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.ui.Alignment.Horizontal,kotlin.Int,kotlin.Int,androidx.compose.foundation.layout.FlowColumnOverflow,kotlin.Function1)`.

The layout behavior of the container is controlled by the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/package-summary#FlexBox(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.FlexBoxConfig,kotlin.Function1)` 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 `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBoxScope#(androidx.compose.ui.Modifier).flex(androidx.compose.foundation.layout.FlexConfig)` modifier.

Understanding FlexBox requires familiarity with its axes:

- **Main Axis** : The primary direction along which items are laid out, determined by the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBoxConfigScope#direction(androidx.compose.foundation.layout.FlexDirection)`. Items are placed starting from the **`main-start`** edge and flowing toward the **`main-end`** edge. Defaults to `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexDirection#Row()`.

  - For `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexDirection#Row()`: `main-start` is the layout's start edge (left in LTR, right in RTL) and `main-end` is the end edge (right in LTR, left in RTL).

  - For `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexDirection#RowReverse()`: `main-start` is the layout's end edge (right in LTR, left in RTL) and `main-end` is the start edge (left in LTR, right in RTL).

  - For `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexDirection#Column()`: `main-start` is the top edge and `main-end` is the bottom edge.

  - For `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexDirection#ColumnReverse()`: `main-start` is the bottom edge and `main-end` is the top edge.

- **Cross Axis** : The axis perpendicular to the main axis. Wrapped lines are added, and items are aligned within their lines, starting from the **`cross-start`** edge and flowing toward the **`cross-end`** edge.

  - For horizontal directions (`https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexDirection#Row()` and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexDirection#RowReverse()`): `cross-start` is the top edge and `cross-end` is the bottom edge.

  - For vertical directions (`https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexDirection#Column()` and `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexDirection#ColumnReverse()`): `cross-start` is the layout's start edge and `cross-end` is the end edge.

Children can dictate how they share available space using the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBoxScope#(androidx.compose.ui.Modifier).flex(androidx.compose.foundation.layout.FlexConfig)` modifier:

- `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexConfigScope#grow(kotlin.Float)`: Defines how much of the remaining positive free space the item should consume relative to its siblings. Defaults to 0f (no growth).

- `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexConfigScope#shrink(kotlin.Float)`: Defines how much the item should shrink when the combined sizes of the items exceed the container's main axis size. Defaults to 1f.

- `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexConfigScope#basis(androidx.compose.foundation.layout.FlexBasis)`: Sets the initial main axis size of the item before any free space distribution (grow or shrink) is calculated. Defaults to `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBasis#Auto()`.

`https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBox.composable#FlexBox(androidx.compose.ui.Modifier,androidx.compose.foundation.layout.FlexBoxConfig,kotlin.Function1)` provides granular control over the placement of items and lines:

- `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBoxConfigScope#wrap(androidx.compose.foundation.layout.FlexWrap)`: Controls whether items are forced onto a single line or allowed to wrap onto multiple lines when they exceed the available space. Defaults to `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexWrap#NoWrap()`.

- `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBoxConfigScope#maxItemsInEachLine(kotlin.Int)`: Limits how many items can be placed in each line when wrapping is enabled. Defaults to no limit.

- `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBoxConfigScope#justifyContent(androidx.compose.foundation.layout.FlexJustifyContent)`: Distributes items along the main axis (for example, spacing them evenly). Defaults to `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexJustifyContent#Start()`.

- `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBoxConfigScope#alignItems(androidx.compose.foundation.layout.FlexAlignItems)`: Aligns items within a specific line along the cross axis (for example, centering them vertically within a Row). Defaults to `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexAlignItems#Start()`.

- `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexConfigScope#alignSelf(androidx.compose.foundation.layout.FlexAlignSelf)`: Allows an individual item to override the container's `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBoxConfigScope#alignItems(androidx.compose.foundation.layout.FlexAlignItems)`. Defaults to `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexAlignSelf#Auto()`.

- `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBoxConfigScope#alignContent(androidx.compose.foundation.layout.FlexAlignContent)`: Distributes multiple wrapped lines along the cross axis. This only applies when wrapping is enabled. Defaults to `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexAlignContent#Start()`.

By default, children are placed in a horizontal row without wrapping. If wrapping is disabled (`https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/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 `https://developer.android.com/reference/kotlin/androidx/compose/ui/draw/clipToBounds.modifier#(androidx.compose.ui.Modifier).clipToBounds()` on the FlexBox if you wish to hide overflowing content.

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

// FlexBox defaults to a Row-like layout (FlexDirection.Row).
// The children will be laid out horizontally.
FlexBox(
    modifier = Modifier.fillMaxWidth(),
    config = {
        direction(
            if (constraints.maxWidth < 400.dp.roundToPx()) FlexDirection.Column
            else FlexDirection.Row
        )
    },
) {
    // This child has a fixed size and will not flex.
    Box(
        modifier = Modifier.size(80.dp).background(Color.Magenta),
        contentAlignment = Alignment.Center,
    ) {
        Text("Fixed")
    }
    // This child has a grow factor of 1. It will take up 1/3 of the remaining space.
    Box(
        modifier = Modifier.height(80.dp).flex { grow(1f) }.background(Color.Yellow),
        contentAlignment = Alignment.Center,
    ) {
        Text("Grow = 1")
    }
    // This child has a growth factor of 2. It will take up 2/3 of the remaining space.
    Box(
        modifier = Modifier.height(80.dp).flex { grow(2f) }.background(Color.Green),
        contentAlignment = Alignment.Center,
    ) {
        Text("Grow = 2")
    }
}
```

| Parameters |
|---|---|
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | The modifier to be applied to the FlexBox container. |
| `config: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBoxConfig = FlexBoxConfig` | A `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBoxConfig` that configures the container's layout properties. Defaults to a horizontal row layout without wrapping, with items aligned to the start on both axes and no gaps between items. |
| `content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBoxScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | The content of the FlexBox, defined within a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/FlexBoxScope`. |

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