# Layouts

> The six layouts, add(LAY_AUTO/LAY_FILL/fraction) and the technique of nesting layouts for real screens.

Source: https://crossfly.dev/docs/learn/layouts — CrossFly documentation. Full docs as one file: https://crossfly.dev/llms-full.txt

# 4. Layouts

> **What you'll learn:** how CrossFly positions things, and the technique of **nesting layouts** to build
> real screens. **Prerequisites:** [Thinking in components](/docs/learn/thinking-in-components).

## Complete example (copy, paste, and run)
The definitive structure of the list screen, **nesting layouts**: header in a `HorizontalLayout` (auto
height), elastic content with `LAY_FILL`, and an auto footer — all in a `VerticalLayout`. Compiles as is.
```java
package com.exemplo;

import dev.crossfly.ui.*;
import dev.crossfly.ui.layout.*;

public class MainWindow extends Window
{
   @Override
   public void onShow() throws Exception
   {
      super.onShow();
      setLayout(new VerticalLayout(Position.START, Position.START));

      // header: HorizontalLayout, natural height (LAY_AUTO)
      Component header = new Component();
      header.setLayout(new HorizontalLayout(Position.START, Position.CENTER));
      header.add(LAY_AUTO, new Button(new MaterialIcon("")));   // icon
      header.add(LAY_FILL, new Label("Minhas tarefas"));         // title absorbs the width
      add(LAY_AUTO, header);

      // content: the "elastic" — absorbs the remaining height
      Component conteudo = new Component();
      conteudo.setLayout(new VerticalLayout());
      conteudo.add(LAY_AUTO, new Label("Item 1"));
      conteudo.add(LAY_AUTO, new Label("Item 2"));
      conteudo.add(LAY_AUTO, new Label("Item 3"));
      add(LAY_FILL, conteudo);

      // footer: natural height
      add(LAY_AUTO, new Button("Adicionar"));
   }
}
```
> The snippets below show **only the core** (what goes inside `onShow()`). To run them, put them in the `MainWindow` skeleton above.

## The six layouts
| Layout | For |
|---|---|
| `VerticalLayout` / `HorizontalLayout` | stacking ↓ / side by side → |
| `GridLayout` | grid by fraction (widths, then components) |
| `RelativeLayout` | anchoring one component to another |
| `EvenlySpacedLayout` | spacing evenly |
| `RandomLayout` | free position (overlays) |

## `add(size, comp)` — the three cases
```java
add(LAY_AUTO, comp);   //  0f → content's natural size
add(LAY_FILL, comp);   // -1f → fills the remaining space (the "elastic")
add(0.3f, comp);       // >0  → 30% of the container's dimension
```

## The key technique: nesting layouts
Real screens are built by **composing** containers with different layouts. Header in a `HorizontalLayout`
(auto), content in `LAY_FILL`, all in a `VerticalLayout`:
```java
setLayout(new VerticalLayout(Position.START, Position.START));

Component header = new Component();
header.setLayout(new HorizontalLayout(Position.START, Position.CENTER));
header.add(LAY_AUTO, new Button(new MaterialIcon("")));   // icon
header.add(LAY_FILL, new Label("Minhas tarefas"));         // title absorbs the width
add(LAY_AUTO, header);                                      // header: natural height

add(LAY_FILL, new VirtualListView(Relative.ofFont(3f), adapter));   // list: absorbs the height
```

## What you build in this step
The **definitive structure** of the list screen: **header** (auto) + **list** (`LAY_FILL`) + footer.

## Recap
`add(0f|-1f|fraction, comp)`; one `LAY_FILL` per axis is the elastic one; **nest layouts** for real screens.

## Next steps
→ [Styling and themes](/docs/learn/styling-and-themes)

## See also
- [Layouts (ui)](/docs/ui/layouts) · Concept: [Layout and the Relative model](/docs/concepts/the-layout-and-relative-model)