Establece el comportamiento del contenedor

Para configurar el comportamiento del contenedor FlexBox, crea un FlexBoxConfig bloque y proporciónalo con el parámetro config.

FlexBox(
    config = {
        direction = FlexDirection.Column
        wrap = FlexWrap.Wrap
        alignItems = FlexAlignItems.Center
        alignContent = FlexAlignContent.SpaceAround
        justifyContent = FlexJustifyContent.Center
        gap(16.dp)
    }
) { // child items
}FlexBoxSnippets.kt

Usa FlexBoxConfig para definir la dirección del diseño, el comportamiento de unión, la alineación y los espacios entre los elementos.

Dirección del diseño

La propiedad direction define el eje principal, que dicta la dirección en la que se disponen los elementos.

Row (predeterminado): Establece el eje principal para que sea horizontal. En las configuraciones regionales de izquierda a derecha será de izquierda a derecha, con lo contrario en las de derecha a izquierda.
RowReverse: Invierte la dirección de Row.
Column: Establece el eje principal para que sea vertical, de arriba abajo.
ColumnReverse: Invierte la dirección de Column.

Alinear elementos y distribuir espacio adicional

En las siguientes secciones, se describe cómo alinear elementos y distribuir espacio adicional a lo largo de los ejes principal y transversal.

A lo largo del eje principal

Usa justifyContent para distribuir elementos a lo largo del eje principal. En la siguiente tabla, se muestra el comportamiento cuando la dirección es Row.


`Start`
`Center`
`End`
`SpaceBetween`
`SpaceAround`
`SpaceEvenly`

A lo largo del eje transversal

Usa alignItems para alinear elementos a lo largo del eje transversal dentro de una sola línea. Los elementos individuales pueden anular este comportamiento con el alignSelf modificador.

En las siguientes imágenes, se muestra el comportamiento cuando la dirección es Row:


	`Start`	`End`	`Center`	`Stretch`	`Baseline`

Usa alignContent para alinear líneas con el eje transversal y distribuir espacio adicional entre las líneas. Esta propiedad solo se aplica cuando hay varias líneas (la unión está habilitada). En las siguientes imágenes, se muestra el comportamiento cuando la dirección es Row:


	`Start`	`End`	`Center`	`Stretch`	`SpaceBetween`	`SpaceAround`

Unir elementos

La unión permite que un contenedor FlexBox se convierta en varias líneas, lo que mueve los elementos que no caben en una fila o columna nueva a lo largo del eje transversal. Configura el comportamiento de unión con wrap.

`FlexWrap` valor	Ejemplo con dirección `Row`
`NoWrap` (predeterminado): Evita que los elementos se unan. Los elementos se desbordan si el tamaño principal es insuficiente.
`Wrap`: Cuando no hay espacio suficiente para un elemento (más cualquier espacio), se crea una línea nueva en la dirección del eje transversal. Por ejemplo, si la dirección es `Row`, se agrega una línea nueva debajo.
`WrapReverse`: Es igual que `Wrap`, excepto que la línea nueva se agrega en la dirección opuesta al eje transversal. Por ejemplo, si la dirección es `Row`, se agrega una línea nueva arriba.

En el siguiente ejemplo, se muestra cómo funciona el algoritmo de unión FlexBox. El FlexBox contenedor tiene un tamaño principal de 100dp, con wrap establecido en FlexWrap.Wrap y un espacio de 8dp. Contiene tres elementos con basis 20dp, 40dp, y 50dp, respectivamente.

Hay 100dp de espacio disponible en la línea. El elemento secundario 1 es 20dp. Hay espacio, por lo que el elemento secundario 1 se coloca en la línea.

Primer elemento colocado en el contenedor FlexBox. — **Figura 1.** Primer elemento colocado en el `FlexBox` contenedor.

Hay 80dp de espacio disponible en la línea. El espacio es 8dp. El elemento secundario 2 es 40dp. El espacio requerido es 48dp. Hay espacio, por lo que el espacio y el elemento secundario 2 se colocan en la línea.

Hay 32dp de espacio disponible en la línea. El espacio es 8dp. El elemento secundario 3 es 50dp. El espacio requerido es 58dp. No hay suficiente espacio en la línea actual, por lo que el elemento secundario 3 se coloca en una línea nueva.

El tercer elemento se coloca en una línea nueva porque no cabe en la primera. — **Figura 3.** Tercer elemento colocado en una línea nueva porque no cabe en la primera línea.

Agregar espacios entre elementos

Agrega espacios entre filas y columnas con rowGap y columnGap. Esto es útil para evitar agregar modificadores de espaciado a los elementos secundarios.