PhiaUi.Components.Layout.Flex (phia_ui v0.1.17)

Copy Markdown View Source

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>

Summary

Functions

flex(assigns)

Renders a flex container with full property control.

Functions

flex(assigns)

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.