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

View Source

Modern Flexbox layout system for Raxol UI components.

This module provides CSS Flexbox-compatible layout calculations with support for:

  • Flex direction (row, column, row-reverse, column-reverse)
  • Justify content (flex-start, flex-end, center, space-between, space-around, space-evenly)
  • Align items (flex-start, flex-end, center, stretch, baseline)
  • Align content (flex-start, flex-end, center, stretch, space-between, space-around)
  • Flex wrapping (nowrap, wrap, wrap-reverse)
  • Flex grow, shrink, and basis
  • Gap properties
  • Order property for reordering items

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

Types

t()

Functions

calculate_layout(flexbox)

Calculates the layout for flexbox and its children.

measure_flex(flex, available_space)

Measures the space needed by a flex container.

new(opts \\ [])

Creates a new flexbox layout with the given options.

process_flex(flex, space, acc)

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

render(flexbox)

Renders the flexbox layout.

Types

t()

@type t() :: %{
  type: :flexbox,
  direction: atom(),
  justify: atom(),
  align: atom(),
  wrap: atom(),
  gap: number(),
  children: list(),
  width: number() | nil,
  height: number() | nil
}

Functions

calculate_layout(flexbox)

@spec calculate_layout(t()) :: map()

Calculates the layout for flexbox and its children.

Returns a map with calculated dimensions and positions.

measure_flex(flex, available_space)

Measures the space needed by a flex container.

new(opts \\ [])

@spec new(keyword()) :: t()

Creates a new flexbox layout with the given options.

Options

  • :direction - flex direction (row, column)
  • :justify - justify content
  • :align - align items
  • :wrap - flex wrap
  • :gap - gap between items
  • :children - child elements
  • :width - container width
  • :height - container height

process_flex(flex, space, acc)

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

render(flexbox)

@spec render(t()) :: {:ok, map()}

Renders the flexbox layout.

Returns the layout with calculated positions for all children.