# Layout y el modelo Relative

> Cómo CrossFly mide y posiciona — relativo por defecto — y por qué esa es la base de la responsividad.

Source: https://crossfly.dev/es/docs/concepts/the-layout-and-relative-model — CrossFly documentation. Full docs as one file: https://crossfly.dev/llms-full.txt

# Layout y el modelo Relative

CrossFly es **relativo por defecto, no absoluto**. Entender esto explica por qué tus pantallas se adaptan
solas a tamaños, densidades y rotaciones diferentes.

## El contrato de layout
Cada container delega la organización de los hijos a un `Layout`. El ciclo, en cascada, es siempre:

**medir → posicionar → propagar `onLayout` a los hijos.**

Cuando el layout se invalida (cambió el tamaño, el contenido, la rotación), el framework rehace ese ciclo a
partir de la raíz. Tú no recalculas posiciones a mano — declaras la **intención** y el `Layout` la resuelve.

## El espectro de layouts (por intención)
- **Apilar** (vertical/horizontal) → `VerticalLayout` / `HorizontalLayout`
- **Cuadrícula por fracción** → `GridLayout`
- **Anclar un componente a otro** → `RelativeLayout`
- **Espaciar uniformemente** → `EvenlySpacedLayout`
- **Posición libre** → `RandomLayout`

Cambiar el `Layout` de un container cambia la disposición sin tocar los hijos — es esto lo que hace trivial la respuesta a
la rotación. (How-to en [Layouts](/docs/ui/layouts).)

## El corazón conceptual: `Relative`
Los tamaños y posiciones no son pixels fijos — son **relaciones**. Las cuatro formas:

| Forma | Significado | Escala con |
|---|---|---|
| `Relative.ofFont(1.5f)` | fracción de la **altura de la fuente** | el zoom/densidad de la UI |
| `Relative.ofScreen(0.8f[, ScreenSize])` | fracción de la **pantalla** | el tamaño de la pantalla / orientación |
| `LAY_FILL` / `LAY_AUTO` / fracción | fracción del **container** | el tamaño del padre |
| `Relative.ofPixels(24f)` | **pixel absoluto** | nada (usar por excepción) |

Y el `Gap` (padding `ingap` / margen `outgap`) sigue la misma lógica: `Gap.ofFont(...)` escala junto.

```java
// header (altura de contenido), contenido (absorbe la sobra), footer (contenido) — en VerticalLayout:
tela.add(LAY_AUTO, header);
tela.add(LAY_FILL, conteudo);   // el "elástico"
tela.add(LAY_AUTO, footer);
```

## Por qué esto es la base de la responsividad
Si **no hay pixels fijos esparcidos**, el framework puede **recalcular todo** en cada resize, rotación o
cambio de escala — y la pantalla simplemente se readapta. La responsividad no es un recurso aparte: es
consecuencia de medir por relaciones.

> Regla de oro: escribe los tamaños como `Relative`/fracciones/`LAY_FILL`; reserva `ofPixels` para casos
> genuinamente fijos. Un pixel fijo es una apuesta a que la pantalla nunca cambia — y siempre cambia.

## Ver también
- Aplicar: [Layouts](/docs/ui/layouts) · [Responsividad](/docs/ui/layouts/responsiveness)
- Siguiente: [Estilos y temas](/docs/concepts/styling-and-theming-model)