FlexBox

Nota: Por el momento, FlexBox es una API experimental y es probable que cambie en el futuro. Informa cualquier problema en la herramienta de seguimiento de errores.

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 completar 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 los elementos crecen y se reducen para llenar el espacio disponible
• Ajusta los elementos en filas o columnas nuevas cuando no haya 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 general de la pantalla. Para un diseño general de la pantalla, 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

Punto clave: FlexBox se ve muy influenciado por la especificación de diseño de caja flexible de CSS y tiene conceptos, terminología y comportamiento casi idénticos. Si conoces display: flex, verás que las propiedades y el comportamiento de FlexBox son casi idénticos.

FlexBox organiza sus elementos en líneas horizontales o verticales. La dirección de estas líneas establece el eje principal. El eje que se encuentra a 90 grados del eje principal es el eje cruzado. La longitud de FlexBox a lo largo del eje principal se conoce como 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.

Figura 1: Ejes y tamaños cuando la dirección de FlexBox es Row.

Figura 2: Ejes y tamaños cuando la dirección de FlexBox es Column.

Cómo aplicar 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: 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 de la cruz cuando hay varias líneas rowGap / columnGap: Agrega espacio entre los elementos y las líneas. Consulta Cómo establecer 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 cualquier espacio adicional del tamaño principal. grow: Es la proporción de espacio adicional del tamaño principal que debe recibir este elemento. shrink: Es la proporción del 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 establecer el comportamiento de los elementos para obtener más información sobre estas propiedades.

Información sobre el algoritmo de diseño FlexBox

Una de las características más poderosas 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. Calcular 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. Ordenar los elementos secundarios: Ordena los elementos secundarios según sus valores de order, si están presentes.

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

4. Alinear o cambiar el tamaño de los elementos en el eje principal: Para cada línea, distribuye el espacio adicional entre los elementos o hacia ellos 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 o entre ellos estirándolos o alineándolos.

Ahora que conoces los conceptos de FlexBox, consulta Cómo comenzar para crear un FlexBox básico.