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.