Raxol.UI.Layout.Flexbox (Raxol v2.6.1)

View Source

Modern Flexbox layout system for Raxol UI components.

See docs/core/LAYOUT.md for the property reference and intentional CSS divergences.

Example

Example Usage

# Flexbox container
%{
  type: :flex,
  attrs: %{
    flex_direction: :row,
    justify_content: :space_between,
    align_items: :center,
    gap: 10,
    padding: %{top: 5, right: 10, bottom: 5, left: 10}
  },
  children: [
    %{type: :text, attrs: %{content: "Item 1", flex: %{grow: 1}}},
    %{type: :text, attrs: %{content: "Item 2", flex: %{shrink: 0, basis: 100}}},
    %{type: :text, attrs: %{content: "Item 3", order: -1}}
  ]
}

Summary

Functions

Measures the space needed by a flex container.

Processes a flex container, calculating layout for it and its children.

Functions

measure_flex(flex, available_space)

Measures the space needed by a flex container.

process_flex(flex, space, acc)

Processes a flex container, calculating layout for it and its children.