Establece el comportamiento del elemento

Usa Modifier.flex para controlar cómo un elemento cambia de tamaño, orden y alineación dentro de un FlexBox.

Tamaño del elemento

Usa las funciones basis, grow y shrink para controlar el tamaño de un elemento.

FlexBox {
    RedRoundedBox(
        modifier = Modifier.flex {
            basis(FlexBasis.Auto)
            grow(1.0f)
            shrink(0.5f)
        }
    )
}
FlexBoxSnippets.kt

Cómo establecer el tamaño inicial

Usa basis para especificar el tamaño inicial del elemento antes de que se distribuya cualquier espacio adicional. Puedes pensar en esto como el tamaño preferido del elemento.

Tipo de valor	Comportamiento	Fragmento de código Nota: Los cuadros tienen un tamaño intrínseco máximo de 100dp.	Ejemplo con un ancho de contenedor de 600dp
Auto (predeterminado)	Usa el tamaño intrínseco máximo del elemento. Por ejemplo, el ancho intrínseco máximo de un elemento componible Text es el ancho de todo su texto en una sola línea, sin ajuste.	FlexBox { RedRoundedBox( Modifier.flex { basis(FlexBasis.Auto) } ) BlueRoundedBox( Modifier.flex { basis(FlexBasis.Auto) } ) } FlexBoxSnippets.kt
dp fijo	Un tamaño fijo en dp.	FlexBox { RedRoundedBox( Modifier.flex { basis(200.dp) } ) BlueRoundedBox( Modifier.flex { basis(100.dp) } ) } FlexBoxSnippets.kt
Porcentaje	Un porcentaje del tamaño del contenedor.	FlexBox { RedRoundedBox( Modifier.flex { basis(0.7f) } ) BlueRoundedBox( Modifier.flex { basis(0.3f) } ) } FlexBoxSnippets.kt

Si el valor base es menor que el tamaño mínimo intrínseco del elemento, se usa el tamaño mínimo intrínseco. Por ejemplo, si un elemento Text que contiene una palabra requiere 50dp para mostrarse, pero también tiene basis = 10.dp, se usa un valor de 50dp.

Cómo aumentar el tamaño de los elementos cuando hay espacio

Usa grow para especificar cuánto crece un elemento cuando hay espacio adicional. Este es el espacio restante en el contenedor FlexBox después de sumar todos los valores basis de los elementos. El valor grow indica cuánto del espacio adicional recibirá un elemento secundario determinado, en relación con sus elementos del mismo nivel. De forma predeterminada, los elementos no crecerán.

En el siguiente ejemplo, se muestra un FlexBox con tres elementos secundarios. Cada uno tiene un valor base de 100dp. El primer elemento secundario tiene un valor grow positivo. Como solo hay un elemento secundario con un valor grow, el valor real es irrelevante. Siempre que sea positivo, el elemento secundario recibirá todo el espacio adicional.

Las imágenes muestran el comportamiento de FlexBox cuando el tamaño del contenedor es 600dp.

FlexBox { RedRoundedBox( title = "400dp", modifier = Modifier.flex { grow(1f) } ) BlueRoundedBox(title = "100dp") GreenRoundedBox(title = "100dp") } FlexBoxSnippets.kt

Cada elemento secundario tiene un valor base de 100dp. Hay 300dp de espacio adicional. El elemento secundario 1 crece en 300dp para llenar el espacio adicional.

En el siguiente ejemplo, el tamaño del contenedor y el tamaño basis son los mismos. La diferencia es que cada elemento secundario tiene un valor grow diferente.

FlexBox { RedRoundedBox( title = "150dp", modifier = Modifier.flex { grow(1f) } ) BlueRoundedBox( title = "200dp", modifier = Modifier.flex { grow(2f) } ) GreenRoundedBox( title = "250dp", modifier = Modifier.flex { grow(3f) } ) } FlexBoxSnippets.kt

Cada elemento secundario tiene un valor base de 100dp. Hay 300dp de espacio adicional. El valor total de crecimiento es 6. El elemento secundario 1 crece en (1 / 6) * 300 = 50dp. El elemento secundario 2 crece en (2 / 6) * 300 = 100dp. El elemento secundario 3 crece en (3 / 6) * 300 = 150dp.

Cómo reducir los elementos cuando no hay espacio suficiente

Usa shrink para especificar cuánto se reduce un elemento cuando el contenedor FlexBox no tiene espacio suficiente para todos los elementos. shrink funciona de la misma manera que grow, excepto que, en lugar de distribuir espacio adicional a los elementos, el déficit de espacio se distribuye a los elementos. El valor shrink especifica cuánto del déficit de espacio recibe el elemento o, mejor dicho, cuánto se reducirá el elemento. De forma predeterminada, los elementos tienen un valor shrink de 1f, lo que significa que se reducen de manera equitativa.

En el siguiente ejemplo, se muestran dos elementos componibles Text con el mismo texto. El primer elemento secundario tiene un valor de reducción de 1f, lo que significa que se reduce para absorber todo el déficit de espacio.

FlexBox {
    Text(
        "The quick brown fox",
        fontSize = 36.sp,
        modifier = Modifier
            .background(PastelRed)
            .flex { shrink(1f) }
    )
    Text(
        "The quick brown fox",
        fontSize = 36.sp,
        modifier = Modifier
            .background(PastelBlue)
            .flex { shrink(0f) }
    )
}
FlexBoxSnippets.kt

A medida que se reduce el tamaño del contenedor, el elemento secundario 1 se reduce.

Tamaño del contenedor	IU de FlexBox
700dp
500dp
450dp

Alineación de elementos

Usa alignSelf para controlar cómo se alinea un elemento con el eje transversal. Esto anula la alignItems propiedad del contenedor para este elemento. Tiene todos los mismos valores posibles, además de Auto, que hereda el comportamiento del contenedor FlexBox.

Por ejemplo, este FlexBox tiene alignItems configurado como Start y cinco elementos secundarios que anulan la alineación del eje transversal.

FlexBox(
    config = {
        alignItems(FlexAlignItems.Start)
    }
) {
    RedRoundedBox()
    BlueRoundedBox(modifier = Modifier.flex { alignSelf(FlexAlignSelf.Center) })
    GreenRoundedBox(modifier = Modifier.flex { alignSelf(FlexAlignSelf.End) })
    PinkRoundedBox(modifier = Modifier.flex { alignSelf(FlexAlignSelf.Stretch) })
    OrangeRoundedBox(modifier = Modifier.flex { alignSelf(FlexAlignSelf.Baseline) })
}
FlexBoxSnippets.kt

Orden del elemento

De forma predeterminada, FlexBox organiza los elementos en el orden en que se declaran en el código. Anula este comportamiento con order.

El valor predeterminado de order es cero, y FlexBox ordena los elementos según este valor en orden ascendente. Los elementos que tienen el mismo valor order se organizan en el mismo orden en que se declaran. Usa valores order negativos y positivos para mover elementos al principio o al final de un diseño sin cambiar el lugar en el que se declaran.

En el siguiente ejemplo, se muestran dos elementos secundarios. El primero tiene el order predeterminado de cero, y el segundo tiene un orden de -1. Después de la clasificación, el elemento secundario 1 aparece después del elemento secundario 2.

FlexBox {
    // Declared first, but will be placed after visually
    RedRoundedBox(
        title = "World"
    )

    // Declared second, but will be placed first visually
    BlueRoundedBox(
        title = "Hello",
        modifier = Modifier.flex {
            order(-1)
        }
    )
}
FlexBoxSnippets.kt