# Layout e o modelo Relative

> Como o CrossFly mede e posiciona — relativo por padrão — e por que isso é a base da responsividade.

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

# Layout e o modelo Relative

O CrossFly é **relativo por padrão, não absoluto**. Entender isso explica por que suas telas se adaptam
sozinhas a tamanhos, densidades e rotações diferentes.

## O contrato de layout
Cada container delega a organização dos filhos a um `Layout`. O ciclo, em cascata, é sempre:

**medir → posicionar → propagar `onLayout` para os filhos.**

Quando o layout é invalidado (mudou o tamanho, o conteúdo, a rotação), o framework refaz esse ciclo a
partir da raiz. Você não recalcula posições na mão — declara a **intenção** e o `Layout` resolve.

## O espectro de layouts (por intenção)
- **Empilhar** (vertical/horizontal) → `VerticalLayout` / `HorizontalLayout`
- **Grade por fração** → `GridLayout`
- **Ancorar um componente a outro** → `RelativeLayout`
- **Espaçar uniformemente** → `EvenlySpacedLayout`
- **Posição livre** → `RandomLayout`

Trocar o `Layout` de um container muda o arranjo sem mexer nos filhos — é isso que torna a resposta à
rotação trivial. (How-to em [Layouts](/docs/ui/layouts).)

## O coração conceitual: `Relative`
Tamanhos e posições não são pixels fixos — são **relações**. As quatro formas:

| Forma | Significado | Escala com |
|---|---|---|
| `Relative.ofFont(1.5f)` | fração da **altura da fonte** | o zoom/densidade da UI |
| `Relative.ofScreen(0.8f[, ScreenSize])` | fração da **tela** | o tamanho da tela / orientação |
| `LAY_FILL` / `LAY_AUTO` / fração | fração do **container** | o tamanho do pai |
| `Relative.ofPixels(24f)` | **pixel absoluto** | nada (use por exceção) |

E o `Gap` (padding `ingap` / margem `outgap`) segue a mesma lógica: `Gap.ofFont(...)` escala junto.

```java
// header (altura de conteúdo), conteúdo (absorve a sobra), footer (conteúdo) — em VerticalLayout:
tela.add(LAY_AUTO, header);
tela.add(LAY_FILL, conteudo);   // o "elástico"
tela.add(LAY_AUTO, footer);
```

## Por que isso é a base da responsividade
Se **não há pixels fixos espalhados**, o framework pode **recalcular tudo** a cada resize, rotação ou
mudança de escala — e a tela simplesmente se readapta. A responsividade não é um recurso à parte: é
consequência de medir por relações.

> Regra de ouro: escreva tamanhos como `Relative`/frações/`LAY_FILL`; reserve `ofPixels` para casos
> genuinamente fixos. Um pixel fixo é uma aposta de que a tela nunca muda — e ela sempre muda.

## Veja também
- Aplicar: [Layouts](/docs/ui/layouts) · [Responsividade](/docs/ui/layouts/responsiveness)
- Próximo: [Estilos e temas](/docs/concepts/styling-and-theming-model)