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 función direction establece el eje principal, que dicta la dirección en la que se disponen los elementos. Acepta los siguientes valores:

• Row (predeterminado): Establece el eje principal para que sea horizontal. En las configuraciones regionales de izquierda a derecha, 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 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 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 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 y mueva 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.

Valor de FlexWrap	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 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 unión 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 elemento secundario 1 es 20dp. Hay espacio, por lo que el elemento secundario 1 se coloca en la línea.

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.

Agrega 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 de conveniencia que agrega columnGap y rowGap.