Composable Function
FlexBox
Common
```kotlin
@Composable
@ExperimentalFlexBoxApi
inline fun FlexBox(
modifier: Modifier = Modifier,
config: FlexBoxConfig = FlexBoxConfig,
content: @Composable FlexBoxScope.() -> Unit,
)
```
A layout that aligns its children in a single direction (the main axis) and allows them to wrap
onto multiple lines. `FlexBox` provides a highly configurable layout system, serving as a
flexible superset of `Row`, `Column`, `FlowRow`, and `FlowColumn`.
The layout behavior of the container is controlled by the `config` 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
`FlexBoxScope.flex` modifier.
Understanding FlexBox requires familiarity with its axes:
- **Main Axis**: The primary direction along which items are laid out, determined by the `FlexBoxConfigScope.direction`. Items are placed starting from the **`main-start`** edge and flowing toward the **`main-end`** edge. Defaults to `FlexDirection.Row`. - For `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 `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 `FlexDirection.Column`: `main-start` is the top edge and `main-end` is the bottom edge. - For `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 (`FlexDirection.Row` and `FlexDirection.RowReverse`): `cross-start` is the top edge and `cross-end` is the bottom edge. - For vertical directions (`FlexDirection.Column` and `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 `FlexBoxScope.flex` modifier:
- `FlexConfigScope.grow`: Defines how much of the remaining positive free space the item should consume relative to its siblings. Defaults to 0f (no growth).
- `FlexConfigScope.shrink`: Defines how much the item should shrink when the combined sizes of the items exceed the container's main axis size. Defaults to 1f.
- `FlexConfigScope.basis`: Sets the initial main axis size of the item before any free space distribution (grow or shrink) is calculated. Defaults to `FlexBasis.Auto`.
`FlexBox` provides granular control over the placement of items and lines:
- `FlexBoxConfigScope.wrap`: Controls whether items are forced onto a single line or allowed to wrap onto multiple lines when they exceed the available space. Defaults to `FlexWrap.NoWrap`.
- `FlexBoxConfigScope.justifyContent`: Distributes items along the main axis (for example, spacing them evenly). Defaults to `FlexJustifyContent.Start`.
- `FlexBoxConfigScope.alignItems`: Aligns items within a specific line along the cross axis (for example, centering them vertically within a Row). Defaults to `FlexAlignItems.Start`.
- `FlexConfigScope.alignSelf`: Allows an individual item to override the container's `FlexBoxConfigScope.alignItems`. Defaults to `FlexAlignSelf.Auto`.
- `FlexBoxConfigScope.alignContent`:Distributes multiple wrapped lines along the cross axis. This only applies when wrapping is enabled. Defaults to `FlexAlignContent.Start`.
By default, children are placed in a horizontal row without wrapping. If wrapping is disabled
(`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
`Modifier.clipToBounds` on the FlexBox if you wish to hide
overflowing content.
#### Parameters
| | |
| --- | --- |
| modifier | The modifier to be applied to the FlexBox container. |
| config | A `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 | The content of the FlexBox, defined within a `FlexBoxScope`. |