Establece el comportamiento del contenedor

Para configurar el comportamiento del contenedor FlexBox, crea un bloque FlexBoxConfig 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 ajuste, la alineación y los espacios entre los elementos.

Dirección del diseño

La función direction establece el eje principal, que determina la dirección en la que se disponen los elementos. Acepta los siguientes valores:

• Row (predeterminado): Establece el eje principal como horizontal. En las configuraciones regionales de izquierda a derecha, esta será de izquierda a derecha, y 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 hacia abajo.
• ColumnReverse: Invierte la dirección de Column.

Alinea elementos y distribuye espacio adicional

En las siguientes secciones, se describe cómo alinear elementos y distribuir espacio adicional en 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. Este comportamiento se puede anular con elementos individuales mediante el modificador alignSelf.

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

	Start	End	Center	Stretch	Baseline

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

	Start	End	Center	Stretch	SpaceBetween	SpaceAround

Ajustar elementos

El ajuste permite que un contenedor FlexBox se convierta en multilínea, lo que mueve los elementos que no caben en una fila o columna nueva a lo largo del eje transversal. Configura el comportamiento de ajuste con wrap.

Valor FlexWrap	Ejemplo con la dirección Row
NoWrap (predeterminado): Impide que los elementos se ajusten. Los elementos se desbordan si el tamaño principal es insuficiente.
Wrap: Cuando no hay suficiente espacio 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 ajuste de FlexBox. El contenedor FlexBox 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 niño 1 tiene 20dp años. Como hay espacio, el elemento secundario 1 se coloca en la línea.

Hay 80dp de espacio disponible en la línea. La brecha es de 8dp. El segundo hijo es 40dp. El espacio requerido es 48dp. Como hay espacio, el espacio vacío y el elemento secundario 2 se colocan en la línea.

Hay 32dp de espacio disponible en la línea. La brecha es de 8dp. El tercer elemento secundario 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.

Agrega espacios entre los elementos

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

rowGap Agrega espacio vertical entre los elementos y las líneas.	columnGap Agrega espacio horizontal entre los elementos y las líneas.	gap es una función conveniente que agrega columnGap y rowGap.