Establece el comportamiento del elemento

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

Tamaño del artículo

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

Establece el tamaño inicial

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

Tipo de valor	Comportamiento	Fragmento de código Nota: Las cajas tienen un tamaño intrínseco máximo de 100dp	Ejemplo con el ancho del contenedor 600dp
Auto (predeterminado)	Usa el tamaño intrínseco máximo del elemento. Por ejemplo, el ancho intrínseco máximo de un elemento Text componible 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
Se corrigió dp.	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 de la 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.

Aumentar el tamaño de los elementos cuando haya 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 que se sumaron 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 hermanos. De forma predeterminada, los elementos no se expandirán.

En el siguiente ejemplo, se muestra un elemento FlexBox con tres elementos secundarios. Cada uno tiene un valor de 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.

En las imágenes, se muestra el comportamiento de FlexBox cuando el tamaño de su 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 de 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 de basis son iguales. 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 de base de 100dp. Hay 300dp de espacio adicional. El valor total de crecimiento es 6. El publicador secundario 1 crece en (1 / 6) * 300 = 50dp El elemento secundario 2 crece (2 / 6) * 300 = 100dp El elemento secundario 3 crece (3 / 6) * 300 = 150dp

Reduce los elementos cuando no haya suficiente espacio

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 el espacio adicional a los elementos, se distribuye el déficit de espacio a los elementos. El valor shrink especifica qué parte del déficit de espacio recibe el elemento o, más bien, cuánto se reducirá. De forma predeterminada, los elementos tienen un valor shrink de 1f, lo que significa que se reducen de la misma manera.

En el siguiente ejemplo, se muestran dos elementos de componibilidad 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, se reduce el elemento secundario 1.

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 propiedad alignItems del contenedor de este elemento. Tiene todos los mismos valores posibles, con la adición de Auto, que hereda el comportamiento del contenedor FlexBox.

Por ejemplo, este FlexBox tiene alignItems establecido en 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 dispone 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 en función de este valor en orden ascendente. Los elementos que tienen el mismo valor order se disponen 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 valor predeterminado order de cero, y el segundo tiene un orden de -1. Después de ordenar, 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