Raxol.Core.Renderer.View.Layout.Flex (Raxol v2.6.1)

View Source

Constructors for :flex-tagged View DSL nodes (row/1, column/1, container/1), consumed by Raxol.Core.Renderer.View's row/column/ flex macros and, transitively, Raxol.UI.Layout.Flexbox -- the live layout engine.

This module only builds plain %{type: :flex, ...} maps; it does not compute layout. The live engine (Raxol.UI.Layout.Flexbox) pattern-matches on those maps directly, independent of this module.

Summary

Functions

Creates a column layout container that arranges its children vertically.

Creates a flex container that arranges its children in the specified direction.

Creates a row layout container that arranges its children horizontally.

Functions

column(opts \\ [])

Creates a column layout container that arranges its children vertically.

Options

  • :children - List of child views to arrange vertically
  • :align - Alignment of children (:start, :center, :end)
  • :justify - Justification of children (:start, :center, :end, :space_between)
  • :gap - Space between children (integer)

Examples

Flex.column(children: [view1, view2])
Flex.column(align: :center, justify: :space_between, children: [view1, view2])

container(opts)

Creates a flex container that arranges its children in the specified direction.

Options

  • :direction - Direction of flex layout (:row or :column)
  • :children - List of child views
  • :align - Alignment of children (:start, :center, :end)
  • :justify - Justification of children (:start, :center, :end, :space_between)
  • :gap - Space between children (integer)
  • :wrap - Whether to wrap children (boolean)

Examples

Flex.container(direction: :row, children: [view1, view2])
Flex.container(direction: :column, align: :center, children: [view1, view2])

row(opts \\ [])

Creates a row layout container that arranges its children horizontally.

Options

  • :children - List of child views to arrange horizontally
  • :align - Alignment of children (:start, :center, :end)
  • :justify - Justification of children (:start, :center, :end, :space_between)
  • :gap - Space between children (integer)

Examples

Flex.row(children: [view1, view2])
Flex.row(align: :center, justify: :space_between, children: [view1, view2])