# HorizontalLayout

> Lays out children side by side, each at the container's height.

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

# HorizontalLayout

Lays out child components **side by side** (one column per child), left to right. It is the
horizontal counterpart of [VerticalLayout](/docs/ui/layouts/vertical-layout) — ideal for bars and rows of controls.

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

## When to use
- Search/action bars: `[icon] [field that stretches] [button]`.
- Any row of controls.

## When NOT to use
- Stacking vertically → [VerticalLayout](/docs/ui/layouts/vertical-layout).
- Need multiple columns with a per-row ratio → [GridLayout](/docs/ui/layouts/grid-layout).

## `add(...)` — signature and semantics
```java
public HorizontalLayout add(float largura, Component c)
```
| Value | Meaning |
|---|---|
| `LAY_AUTO` (`0f`) | component's **natural width** |
| `LAY_FILL` (`-1f`) | **fills the remaining space** (use **one** FILL column) |
| `> 0` (ex. `0.5f`) | **fraction of the container's width** |

## Constructors
| Constructor | Description |
|---|---|
| `new HorizontalLayout()` | items **vertically centered** |
| `new HorizontalLayout(Position h, Position v)` | `v` = vertical alignment of each column |

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

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

/** 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();

      setLayout(new VerticalLayout(Position.START, Position.START));

      Component barra = new Component();
      barra.setLayout(new HorizontalLayout(Position.START, Position.CENTER));
      barra.add(LAY_AUTO, new Label("🔎"));               // natural width
      barra.add(LAY_FILL, new TextField("Buscar..."));     // stretches
      barra.add(LAY_AUTO, new Button("OK"));               // natural width

      add(LAY_AUTO, barra);                    // the bar takes up one row at the top
      add(LAY_FILL, new Component());          // rest of the screen (placeholder)
   }
}
```

> 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 barra = new Component();
barra.setLayout(new HorizontalLayout(Position.START, Position.CENTER));
barra.add(LAY_AUTO, new ImageView(/* icon */));   // natural width
barra.add(LAY_FILL, new TextField("Buscar..."));    // stretches
barra.add(LAY_AUTO, new Button("OK"));              // natural width
```

## How it arranges
```
┌────────┬───────────────────────────┬────────┐
│ ícone  │ campo (LAY_FILL, estica)   │ botão  │
│ (auto) │                           │ (auto) │
└────────┴───────────────────────────┴────────┘
```

## Best practices
- **1 `LAY_FILL` element** per row (the one that should stretch).
- Two "elastic" elements with a fixed ratio → fractions (`0.5f`/`0.5f`) or [GridLayout](/docs/ui/layouts/grid-layout).

## Common mistakes
- Two `LAY_FILL` in the same row.
- Using pixels (`add(120, x)`) instead of fraction/auto — breaks responsiveness.

## See also
- [VerticalLayout](/docs/ui/layouts/vertical-layout) · [GridLayout](/docs/ui/layouts/grid-layout) · [Responsiveness](/docs/ui/layouts/responsiveness)