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

Full flexbox control component.

Encodes all flexbox properties as typed attributes so you get autocomplete
and compile-time validation rather than ad-hoc Tailwind strings.

All layout attributes accept either a plain value (backward compatible) or a
responsive map like `%{base: :col, md: :row}` for per-breakpoint control.

## Examples

    <%!-- Row with gap and centered alignment --%>
    <.flex gap={4} align={:center}>
      <.icon name="hero-user" />
      <span>Username</span>
    </.flex>

    <%!-- Column layout --%>
    <.flex direction={:col} gap={6}>
      <.card>A</.card>
      <.card>B</.card>
    </.flex>

    <%!-- Responsive direction: column on mobile, row from md up --%>
    <.flex direction={%{base: :col, md: :row}} gap={%{base: 2, lg: 4}}>
      <.card>A</.card>
      <.card>B</.card>
    </.flex>

    <%!-- Space-between toolbar --%>
    <.flex justify={:between} align={:center} class="px-4 h-14">
      <span>Logo</span>
      <nav>...</nav>
    </.flex>

    <%!-- Inline flex for badge composition --%>
    <.flex inline gap={1} align={:center}>
      <.badge>New</.badge>
      <span>Label</span>
    </.flex>

# `flex`

Renders a flex container with full property control.
## Attributes

* `direction` (`:any`) - Flex direction. Accepts atom or responsive map, e.g. `%{base: :col, md: :row}`. Defaults to `:row`.
* `wrap` (`:any`) - Flex wrap behavior. Accepts atom or responsive map. Defaults to `:nowrap`.
* `gap` (`:any`) - Uniform gap (0–12) → `gap-N`. Accepts integer or responsive map. Defaults to `nil`.
* `gap_x` (`:any`) - Horizontal gap → `gap-x-N`. Accepts integer or responsive map. Defaults to `nil`.
* `gap_y` (`:any`) - Vertical gap → `gap-y-N`. Accepts integer or responsive map. Defaults to `nil`.
* `align` (`:any`) - align-items value. Accepts atom or responsive map. Defaults to `nil`.
* `justify` (`:any`) - justify-content value. Accepts atom or responsive map. Defaults to `nil`.
* `grow` (`:boolean`) - Adds `flex-1` so the container grows. Defaults to `false`.
* `inline` (`:boolean`) - Use `inline-flex` instead of `flex`. Defaults to `false`.
* `class` (`:string`) - Additional CSS classes merged via cn/1. Defaults to `nil`.
* Global attributes are accepted. HTML attributes forwarded to the root element.
## Slots

* `inner_block` (required) - Flex children.

---

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