FlexBox

FlexBox es un contenedor que organiza los elementos en una sola dirección. Puede cambiar el tamaño, ajustar, alinear y distribuir el espacio entre los elementos para llenar de forma óptima el espacio disponible. Es un diseño útil para elementos de diferentes tamaños y para cambiar el tamaño de los elementos cuando cambia el espacio disponible.

Con FlexBox, puedes hacer lo siguiente:

• Controlar cómo crecen y se reducen los elementos para llenar el espacio disponible
• Ajustar los elementos en filas o columnas nuevas cuando no hay suficiente espacio para ellos
• Distribuir espacio adicional entre los elementos con ajustes preestablecidos convenientes

Cuándo usar FlexBox

Por lo general, FlexBox se usa para mostrar una pequeña cantidad de elementos dentro de un diseño de pantalla general. Para un diseño de pantalla general, Grid suele ser una mejor opción. FlexBox no admite la carga diferida de elementos. Para mostrar una gran cantidad de elementos, usa listas y cuadrículas diferidas. Si necesitas ajustar elementos, usa FlexBox en lugar de FlowRow y FlowColumn.

Terminología y conceptos

FlexBox organiza sus elementos en líneas horizontales o verticales. La dirección de estas líneas establece el eje principal. El eje cruzado se encuentra a 90 grados del eje principal. La longitud de FlexBox a lo largo del eje principal se conoce como el tamaño principal. La longitud correspondiente del eje cruzado se conoce como el tamaño cruzado. Estos tamaños y ejes forman la base del comportamiento de FlexBox.

Aplica propiedades

Puedes aplicar propiedades de FlexBox de dos maneras:

• Al contenedor FlexBox con FlexBox(config)
• A un elemento dentro de FlexBox con Modifier.flex

Propiedades del contenedor (config)

Propiedades del elemento (Modifier.flex)

direction: La dirección del diseño del elemento wrap - si se deben ajustar los elementos si el tamaño principal es insuficiente justifyContent - Indica cómo distribuir los elementos a lo largo del eje principal alignItems - cómo alinear elementos a lo largo del eje cruzado alignContent - Indica cómo distribuir el espacio adicional del tamaño cruzado cuando hay varias líneas rowGap / columnGap: Agrega espacio entre los elementos y las líneas Consulta Establece el comportamiento del contenedor para obtener más información sobre estas propiedades.

basis - el tamaño del elemento antes de que se distribuya cualquier espacio adicional del tamaño principal grow - `grow`: La parte del espacio adicional del tamaño principal que debe recibir este elemento shrink - la parte del déficit de espacio del tamaño principal que debe recibir este elemento alignSelf - cómo distribuir el espacio adicional del tamaño cruzado a este elemento, anula alignItems order: Controla el orden del diseño Consulta Establece el comportamiento del elemento para obtener más información sobre estas propiedades.

Comprende el algoritmo de diseño de FlexBox

Una de las funciones más potentes de FlexBox es su capacidad para cambiar el tamaño de sus elementos secundarios para que se ajusten mejor al espacio disponible. Comprender cómo lo hace FlexBox puede ayudarte a establecer propiedades de FlexBox para optimizar tu IU para todos los tamaños posibles.

El algoritmo de diseño de FlexBox funciona de la siguiente manera:

1. Calcula el tamaño base del elemento secundario: Usa el valor basis del elemento secundario para calcular su tamaño inicial a lo largo del eje principal antes de que se distribuya cualquier espacio adicional.

2. Ordena los elementos secundarios: Ordena los elementos secundarios según sus valores order, si están presentes.

3. Compila líneas: Para cada elemento secundario, verifica si su tamaño inicial más gap cabrá en el espacio restante de la línea actual. Si es así, coloca este elemento secundario en la línea. De lo contrario, colócalo en una línea nueva si el ajuste está habilitadoo coloca el elemento en la línea actual donde se desbordará (estará parcialmente oculto por el borde del contenedor).

4. Alinea o cambia el tamaño de los elementos en el eje principal: Para cada línea, distribuye espacio adicional a los elementos o entre ellos cambiando su tamaño o alineándolos.

5. Alinea o cambia el tamaño de los elementos en el eje cruzado: Para cada línea, distribuye espacio adicional a los elementos y las líneas o entre ellos estirándolos o alineándolos.

Ahora que estás familiarizado con los conceptos de FlexBox, consulta Comienza a crear un FlexBox básico.