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:

• Controla cómo se expanden y se reducen los elementos para llenar el espacio disponible
• Ajustar los elementos a filas o columnas nuevas cuando no hay suficiente espacio para ellos
• Distribuye el espacio adicional entre los elementos con ajustes predeterminados 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 grandes cantidades 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 dispone sus elementos en líneas horizontales o verticales. La dirección de estas líneas establece el eje principal. A 90 grados del eje principal, se encuentra el eje transversal. La longitud del FlexBox a lo largo del eje principal se conoce como el tamaño principal. La longitud del eje transversal correspondiente se conoce como tamaño transversal. Estos tamaños y ejes forman la base del comportamiento de FlexBox.

Aplica propiedades

Puedes aplicar las 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: Es la dirección del diseño del elemento. wrap: Indica si se deben ajustar los elementos si el tamaño principal es insuficiente. justifyContent: Cómo distribuir elementos a lo largo del eje principal alignItems: Cómo alinear elementos a lo largo del eje transversal alignContent: Cómo distribuir el espacio adicional del tamaño transversal cuando hay varias líneas rowGap / columnGap: Agrega espacio entre los elementos y las líneas. Consulta Cómo configurar el comportamiento del contenedor para obtener más información sobre estas propiedades.

basis: Es el tamaño del elemento antes de que se distribuya el espacio adicional del tamaño principal. grow: Es el porcentaje de espacio adicional del tamaño principal que debe recibir este elemento. shrink: Es el porcentaje de déficit de espacio del tamaño principal que debería recibir este elemento. alignSelf: Indica cómo distribuir el espacio adicional del tamaño transversal a este elemento; anula alignItems. order: Controla el orden del diseño. Consulta Cómo configurar el comportamiento de los elementos 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 y adaptarlos de la mejor manera al espacio disponible. Comprender cómo FlexBox hace esto puede ayudarte a establecer las 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 a este niño en la fila. De lo contrario, se colocará en una línea nueva si está habilitado el ajuste de línea o se colocará en la línea actual, donde se desbordará (el borde del contenedor lo ocultará parcialmente).

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

5. Alinear o cambiar el tamaño de los elementos en el eje transversal: Para cada línea, distribuye el espacio adicional entre los elementos y las líneas estirándolos o alineándolos.

Ahora que conoces los conceptos de FlexBox, consulta Comienza para crear un FlexBox básico.