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, será de izquierda a derecha, y viceversa en las de derecha a izquierda.
• RowReverse: Invierte la dirección de Row.
• Column: Establece el eje principal como vertical, de arriba hacia abajo.
• ColumnReverse: Invierte la dirección de Column.

Cómo 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. Este comportamiento se puede anular en elementos individuales con 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 ellas. Esta propiedad solo se aplica cuando hay varias líneas (el ajuste está habilitado). En las siguientes imágenes, se muestra el comportamiento cuando la dirección es Row:

	Start	End	Center	Stretch	SpaceBetween	SpaceAround

Cómo unir elementos

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

FlexWrap valor	Ejemplo con la dirección Row
NoWrap (predeterminado): Evita 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 brecha), se crea una nueva línea 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 FlexBox. El contenedor FlexBox tiene un tamaño principal de 100dp, con wrap establecido en FlexWrap.Wrap y una brecha de 8dp. Contiene tres elementos con basis 20dp, 40dp y 50dp, respectivamente.

Hay 100dp espacios disponibles en la línea. El hijo 1 es 20dp. Hay espacio, por lo que el hijo 1 se coloca en la fila.

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

Hay 32dp espacios disponibles en la línea. La brecha es de 8dp. El hijo o hija 3 es 50dp. El espacio requerido es 58dp. No hay suficiente espacio en la línea actual, por lo que el hijo 3 se coloca en una línea nueva.

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.

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