Establece el comportamiento del elemento

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

Tamaño del artículo

Usa las propiedades 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 considerar este valor 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.	Es un tamaño fijo en Dp.	FlexBox { RedRoundedBox( Modifier.flex { basis(200.dp) } ) BlueRoundedBox( Modifier.flex { basis(100.dp) } ) } FlexBoxSnippets.kt
Porcentaje	Es 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.

Cultiva elementos cuando haya espacio

Usa grow para especificar cuánto crece un elemento cuando hay espacio adicional. Es el espacio restante en el contenedor FlexBox después de sumar todos los valores de basis de los elementos. El valor de grow indica cuánto espacio adicional recibirá un elemento secundario determinado, en relación con sus elementos secundarios del mismo nivel. 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 base de 100dp. El primer hijo tiene un valor grow positivo. Como solo hay un hijo con un valor de grow, el valor real es irrelevante. Siempre que sea positivo, el hijo recibirá todo el espacio adicional.

Las imágenes muestran 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 hijo tiene un valor base de 100dp. Hay 300dp de espacio adicional. El hijo 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 hijo 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 hijo tiene un valor base de 100dp. Hay 300dp de espacio adicional. El valor de crecimiento total es 6. El niño 1 crece en (1 / 6) * 300 = 50dp. El niño 2 crece en (2 / 6) * 300 = 100dp El hijo 3 crece en (3 / 6) * 300 = 150dp.

Reducir 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 entre los elementos, se distribuye el déficit de espacio entre ellos. El valor de shrink especifica cuánto 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 contraen de forma equitativa.

En el siguiente ejemplo, se muestran dos elementos Text componibles 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 también 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 propiedad alignItems del contenedor para 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 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 de order se disponen en el mismo orden en que se declaran. Usa valores order negativos y positivos para mover elementos al inicio 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 la clasificación, el hijo 1 aparece después del hijo 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