# EvenlySpacedLayout

> Distributes children with equal spacing along an axis, preserving each one's size.

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

# EvenlySpacedLayout

Distributes children with **equal spacing** along an axis (horizontal by default), **preserving each
one's size**. Ideal for toolbars of icons/buttons with their own size.

> 🟡 · **Package:** `dev.crossfly.ui.layout` · **Extends:** `Layout`

## When to use
- Action bars / icon toolbars that must be equally spaced.

## When NOT to use
- When items should **stretch** to fill → use fractions in the
  [HorizontalLayout](/docs/ui/layouts/horizontal-layout).

## `add(...)` and constructors
```java
public EvenlySpacedLayout add(Component c);      // (or add(Component...))
new EvenlySpacedLayout();                          // HORIZONTAL (default)
new EvenlySpacedLayout(Orientation.VERTICAL);      // vertical axis
```

## ⚠️ Key point: it does NOT size the items
The layout only **distributes the spaces** — each item's **size** comes from its current bounds or from
auto-size. For responsive items, give them a size via **style** (`autoWidth`/`autoHeight`) with
`Relative`.

## Full example (copy, paste and run)
```java
package com.exemplo;

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

/** Runnable main screen. Point the launcher (classname) and run: gradlew :lwjgl3:run */
public class MainWindow extends Window
{
   @Override
   public void onShow() throws Exception
   {
      super.onShow();

      String[] icones = { "home", "search", "settings", "person" };

      Component toolbar = new Component();
      toolbar.setLayout(new EvenlySpacedLayout());                 // horizontal
      Relative lado = Relative.ofScreen(0.12f, ScreenSize.MIN);    // 12% of the smaller side → responsive square
      for (String glyph : icones) {
         Button b = new Button(new MaterialIcon(glyph));
         b.getStyle().autoWidth(lado).autoHeight(lado);            // responsive size from the style
         toolbar.add(b);
      }

      setLayout(new VerticalLayout(Position.START, Position.START));
      add(LAY_FILL, new Component());   // content (placeholder)
      add(LAY_AUTO, toolbar);           // action bar in the footer
   }
}
```

> The snippets below show **only the core** (what goes inside `onShow()`). To run them, place them in the `MainWindow` skeleton above.

## Basic usage
```java
Component toolbar = new Component();
toolbar.setLayout(new EvenlySpacedLayout());                 // horizontal
Relative lado = Relative.ofScreen(0.12f, ScreenSize.MIN);    // 12% of the smaller side → responsive square
for (String glyph : icones) {
   Button b = new Button(new MaterialIcon(glyph));
   b.getStyle().autoWidth(lado).autoHeight(lado);            // responsive size from the style
   toolbar.add(b);
}
```

## How it arranges
```
│   [i1]     [i2]     [i3]   │   ← espaços iguais entre e nas bordas; itens mantêm seu tamanho
```

## Best practices
- Give items their size via `Relative` (`ofScreen(..., ScreenSize.MIN)` for squares that adapt to
  portrait/landscape).

## Common mistakes
- Expecting items to become the same size automatically — they do not; set the size.
- Using fixed pixels for item sizes.

## See also
- [HorizontalLayout](/docs/ui/layouts/horizontal-layout) · [Responsiveness](/docs/ui/layouts/responsiveness)