El Flow Builder crea layouts responsivos. No arrastras los elementos a coordenadas exactas; en su lugar, los anidas dentro de contenedores que organizan sus hijos automáticamente. El contenedor define la dirección de los elementos (vertical u horizontal), su alineación y el espaciado. Cada elemento puede ajustar su propio tamaño y márgenes, o bien —cuando sea necesario— salirse del flujo con posicionamiento absoluto o fijo.

Diseño

El diseño es la herramienta principal para organizar los elementos en pantalla. Cada contenedor distribuye automáticamente sus elementos secundarios según un conjunto de reglas: dirección, alineación y espaciado. Los elementos de diseño disponibles en el builder son:

• Contenedor vertical: Organiza los elementos hijo de arriba a abajo
• Contenedor horizontal: Organiza los elementos hijo de izquierda a derecha
• Divisor: Un separador visual entre elementos
• Carrusel: Un conjunto de diapositivas con desplazamiento horizontal
• Bottom Sheet: Un panel deslizante que muestra contenido adicional cuando el usuario pulsa un botón Los contenedores son los bloques principales de una pantalla. Puedes anidarlos entre sí para construir layouts complejos. Cada contenedor tiene una sección Layout en el panel derecho que controla cómo se distribuyen sus elementos hijos.

Para agrupar elementos en un nuevo contenedor, usa la acción de capa Wrap layer action. Para eliminar un contenedor y ascender sus hijos, usa Unwrap.

Dirección

• Free: Sin layout automático. Los elementos hijos se posicionan de forma independiente (útil cuando usan posicionamiento absoluto)
• Vertical: Los elementos hijos se apilan de arriba hacia abajo, como filas en una columna
• Horizontal: Los elementos hijos se distribuyen de izquierda a derecha, como ítems en una fila

Orden de los elementos

Los elementos secundarios se renderizan en el orden en que aparecen en el panel Layers. En un contenedor vertical, el elemento situado más arriba en la lista aparece en la parte superior de la pantalla. En un contenedor horizontal, el elemento más arriba aparece a la izquierda. Arrastra los elementos en el panel Layers para reordenarlos, o usa Move Up y Move Down en las acciones de capa.

Alineación

La cuadrícula de alineación controla dónde se colocan los elementos hijos a lo largo del eje transversal del contenedor. En un contenedor vertical, la alineación controla la posición horizontal de los hijos (izquierda, centro o derecha). En un contenedor horizontal, controla su posición vertical (arriba, al medio o abajo).

Distribución

La distribución determina cómo se divide el espacio entre los elementos hijos a lo largo del eje principal:

• Gap (predeterminado): Un valor fijo en píxeles entre elementos hijos adyacentes
• Space Between: Los hijos se extienden hasta los bordes; aparecen espacios iguales entre ellos
• Space Around: Un espacio igual rodea a cada hijo, con espacios de la mitad de tamaño en los bordes
• Space Evenly: Espacio igual antes, entre y después de todos los hijos

Recortar contenido

Recorta visualmente el contenido que sobresale más allá de los límites del contenedor. Desactívalo para permitir el desbordamiento (por ejemplo, una insignia que intencionalmente sobresale del borde de la tarjeta).

Posición

Por defecto, la posición de cada elemento la determina automáticamente el layout de su contenedor. El toggle Position te permite sacarlo del flujo normal y posicionarlo manualmente.

Relativo (predeterminado)

El elemento permanece en el flujo normal del diseño. Su posición la determina automáticamente el contenedor padre según sus reglas de maquetación: no se puede arrastrar libremente. Usa Margin para ajustar el espacio alrededor de un elemento relativo.

Usa el posicionamiento relativo para la gran mayoría del contenido: bloques de texto, imágenes, tarjetas, botones y elementos de lista.

Absoluta

El elemento se extrae del flujo normal y se superpone sobre el resto del contenido. Ya no afecta al diseño de los elementos vecinos.

Al seleccionar Absolute, aparecen controles adicionales:

• Campos de desplazamiento (T, L, R, B): Establece la distancia en píxeles desde el elemento hasta cada borde de su contenedor padre
• Cuadrícula de anclaje: Haz clic en un punto de la cuadrícula 3×3 para elegir a qué esquina, borde o centro del padre se ancla el elemento
• Anclaje horizontal (Left / Center / Right) y Anclaje vertical (Top / Center / Bottom): Menús desplegables que controlan el mismo punto de anclaje que la cuadrícula
• Z-index: Campo numérico que controla el orden de apilamiento del elemento respecto a sus hermanos. Los elementos con valores más altos aparecen encima Usa posicionamiento absoluto para superposiciones decorativas, insignias, botones de cierre e iconos colocados sobre imágenes.

Fijo

El elemento ignora completamente su contenedor padre y se ancla al viewport del dispositivo. Permanece visible mientras el usuario hace scroll: el contenido de la página se desplaza por debajo.

El posicionamiento fijo usa los mismos controles que el Absoluto (desplazamientos, cuadrícula de anclaje, índice Z). Todos los desplazamientos son relativos a los bordes de la pantalla en lugar de al padre.

Usa el posicionamiento fijo para botones fijos en la parte inferior, barras de navegación flotantes y cabeceras persistentes.

Tamaño

Cada elemento tiene controles de Width y Height. Haz clic en el desplegable para elegir el modo de dimensionado:

• Fill: El elemento se expande para ocupar todo el espacio disponible en su contenedor. El valor en píxeles que se muestra es el resultado calculado.
• Hug: El elemento se encoge para ajustarse a su contenido. El valor en píxeles que se muestra es el resultado calculado.
• Fixed: El elemento usa exactamente el valor en píxeles que especifiques, independientemente del tamaño del contenedor o del contenido. Es el único modo disponible para elementos con posicionamiento absoluto o fijo.

Espaciado

Ajusta los valores de espaciado de forma independiente para cada lado del elemento.

• Margin: El espacio entre el elemento y sus vecinos. No se extiende más allá de los límites del contenedor padre, independientemente de su valor.
• Padding: El espacio entre el borde del elemento y su contenido.

Los elementos de texto solo tienen margin. Las pantallas solo tienen padding. Ambos están disponibles para contenedores y otros elementos con contenido hijo.

Orden de apilamiento

Los elementos relativos nunca se superponen entre sí: cada contenedor coloca sus hijos en secuencia. La superposición solo ocurre cuando un elemento sale del flujo normal con posicionamiento Absolute o Fixed.

Cuando los elementos se superponen, los hermanos posteriores en el panel Layers se renderizan por encima de los anteriores, incluso cuando el hermano posterior es relativo y el anterior es absoluto. Los elementos Absolute y Fixed tienen un campo Z-index para un control más preciso: los valores más altos tienen prioridad. Los elementos Relative no tienen Z-index — solo el orden de capas determina su posición en la pila.

Usa las acciones de capa Move up y Move down para cambiar el orden de los elementos.