# `PhiaUi.Components.Layout.Spacer`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/layout/spacer.ex#L1)

Flex spacer that grows to fill remaining space in a flex container.

Drop a `<.spacer />` between two items in a flex row/column to push the
trailing item to the far end — equivalent to `margin-left: auto` patterns.

## Examples

    <%!-- Push actions to the right in a toolbar --%>
    <div class="flex items-center">
      <span>Title</span>
      <.spacer />
      <.button>Action</.button>
    </div>

    <%!-- Fixed-size gap --%>
    <div class="flex flex-col">
      <p>Top</p>
      <.spacer size={:md} />
      <p>Below with fixed gap</p>
    </div>

# `spacer`

Renders a flex spacer element.
## Attributes

* `size` (`:atom`) - `auto` grows to fill remaining flex space; others add a fixed dimension. Defaults to `:auto`. Must be one of `:auto`, `:xs`, `:sm`, `:md`, `:lg`, or `:xl`.
* `class` (`:string`) - Additional CSS classes merged via cn/1. Defaults to `nil`.
* Global attributes are accepted. HTML attributes forwarded to the root element.

---

*Consult [api-reference.md](api-reference.md) for complete listing*