Flex View

Flex views arrange content in a one-dimensional layout using rows or columns.

They are suitable for responsive layouts, toolbars, and simple compositions.

In most models you do not instantiate FlexView directly. Instead, create it via the UiBuilder API, UiBuilder.add_flex_view(), which registers the view with the UI definition and ensures it is included in the build output.

class FlexView(display_name=None, hidden=False)[source]

Bases: CompositeView

A composite view that arranges its child views using CSS Flexbox layout.

This view manages its children in a flexible container, allowing control over direction, alignment, wrapping, and spacing using standard Flexbox properties.

Parameters:

display_name (str | None) – A human-readable name for this view. Defaults to None.
hidden (bool) – Whether the view is initially hidden. Defaults to False.
scroll_sync_enabled (bool, optional) – If True, enables synchronized scrolling with sibling views. Defaults to False.
flex_direction (FlexDirection, optional) – The main axis direction of the flex container. Defaults to FlexDirection.COLUMN.
justify_content (FlexAlignment, optional) – How children are distributed along the main axis. Defaults to FlexAlignment.FLEX_START.
flex_wrap (FlexWrap, optional) – Whether children wrap onto multiple lines. Defaults to FlexWrap.NOWRAP.
align_content (FlexAlignment, optional) – How multiple lines are aligned along the cross axis when wrapping. Defaults to FlexAlignment.FLEX_START.
gap (str, optional) – The gap between flex items, e.g., “5px”, “1rem”. Defaults to “5px”.

set_flex_direction(flex_direction)[source]

Sets the main axis direction of the flex container.

Return type:: FlexView

set_justify_content(justify_content)[source]

Sets how children are distributed along the main axis.

Return type:: FlexView

set_flex_wrap(flex_wrap)[source]

Sets whether children wrap onto multiple lines.

Return type:: FlexView

set_align_content(align_content)[source]

Sets how multiple lines are aligned along the cross axis when wrapping.

Return type:: FlexView

set_gap(gap)[source]

Sets the gap between flex items.

Return type:: FlexView

set_background_colour(colour)[source]

Sets the background colour of the flex view.

Return type:: FlexView

set_padding(padding)[source]

Sets the padding of the flex view.

Return type:: FlexView

set_scroll_sync_enabled(enabled)[source]

Sets whether synchronized scrolling with sibling views is enabled.

Return type:: FlexView

add_child(view, exclude_default_styling=False, **kwargs)[source]

Adds a child view to this composite layout with flexible styling options.

Parameters:

view (BaseView) – The view to be added as a child within this composite layout.
exclude_default_styling (bool) – If True, default system styling for the child view will be skipped. Defaults to False.
**kwargs –
Keyword arguments that define style configuration for this child view. All keys must correspond to attributes of the FlexChild class, including layout behavior (e.g., flex_grow, flex_shrink, align_self) and visual styling (e.g., padding, margin, border, box_shadow, background_color).

If a keyword does not match any attribute of FlexChild, an AttributeError is raised.

Raises:

AttributeError – If any key in **kwargs does not match a valid FlexChild attribute.

Example

>>> add_child(
...     view=some_view,
...     flex_grow=1,
...     padding="1rem",
...     background_color="#f0f0f0"
... )

Supporting Types

class FlexChild(flex_grow=0, flex_shrink=0, flex_basis='auto', align_self=None, padding='unset', margin=None, border='none', border_radius=None, box_shadow='none', background_color=None, border_color=None, width=None, height=None)[source]

Bases: Buildable

Configuration options for a flex item (i.e., a child of a flex container).

flex_grow

Determines how much the item should grow relative to others when there is extra space in the container. A value of 0 (default) means the item will not grow. A value of 1 or higher means the item can grow to fill remaining space, with higher values getting proportionally more.

Example

If one item has flex_grow=2 and another has flex_grow=1, the first will get twice as much of the remaining space as the second.

Type:: Optional[float]

flex_shrink

Determines how much the item should shrink relative to others when the container is too small to fit all items. A value of 1 (default) allows proportional shrinking. A value of 0 prevents shrinking at all.

Example

If one item has flex_shrink=2 and another has flex_shrink=1, the first will shrink twice as much when space is constrained.

Type:: Optional[float]

flex_basis

The initial size of the item before it is adjusted by grow or shrink. Can be an explicit size like “100px”, a percentage, or “auto”. Default is “auto”.

Type:: Optional[str | int]

align_self

Overrides the container’s align-items value for this individual item. Useful for one-off alignment behavior. Default is None.

Type:: Optional[FlexAlignSelf]

padding

The padding inside the flex item. Can be any valid CSS padding value such as “10px”, “1em”, or “unset”. Default is “unset”.

Type:: Optional[str | int]

margin

The margin around the flex item. Can be any valid CSS margin value such as “0”, “8px”, or “auto”. Default is None.

Type:: Optional[str | int]

border

CSS border definition for the item, e.g., “1px solid #ccc”. Default is None.

Type:: Optional[str]

border_radius

Rounding of corners. Accepts values like “4px” or “50%”. Default is None.

Type:: Optional[str | int]

box_shadow

Shadow styling for the item, e.g., “0 4px 6px rgba(0,0,0,0.1)”. Default is None.

Type:: Optional[str]

background_color

Background color of the flex item. Can be any valid CSS color value, e.g., “#f0f0f0”, “rgba(255,255,255,0.8)”, or “transparent”. Default is None.

Type:: Optional[str]

flex_grow: float | None = 0

flex_shrink: float | None = 0

flex_basis: str | int | None = 'auto'

align_self: FlexAlignSelf | None = None

padding: str | int | None = 'unset'

margin: str | int | None = None

border: str | None = 'none'

border_radius: str | int | None = None

box_shadow: str | None = 'none'

background_color: str | None = None

border_color: str | None = None

width: str | None = None

height: str | None = None

class FlexAlignment(*values)[source]

Bases: Enum

Defines how flex items are aligned within the container.

FLEX_START: Lines are packed to the start of the axis.

FLEX_END: Lines are packed to the end of the axis.

CENTER: Lines are centered along the axis.

SPACE_BETWEEN: Even spacing between lines with no space at the edges.

SPACE_AROUND: Even spacing around each line.

SPACE_EVENLY: Equal spacing between all lines and edges.

STRETCH: Lines stretch to fill the container. (Only applies to cross-axis alignment when wrapped)

FLEX_START = 'flex-start'

FLEX_END = 'flex-end'

CENTER = 'center'

SPACE_BETWEEN = 'space-between'

SPACE_AROUND = 'space-around'

SPACE_EVENLY = 'space-evenly'

STRETCH = 'stretch'

class FlexAlignSelf(*values)[source]

Bases: Enum

Controls the cross-axis alignment of an individual flex item.

AUTO: Inherits the parent’s align-items setting (default).

FLEX_START: Aligns the item to the start of the cross axis.

FLEX_END: Aligns the item to the end of the cross axis.

CENTER: Centers the item along the cross axis.

BASELINE: Aligns the item with the baseline of the parent.

STRETCH: Stretches the item to fill the cross axis (if no height is set).

AUTO = 'auto'

FLEX_START = 'flex-start'

FLEX_END = 'flex-end'

CENTER = 'center'

BASELINE = 'baseline'

STRETCH = 'stretch'

class FlexDirection(*values)[source]

Bases: Enum

Defines the direction in which flex items are laid out in a flex container.

COLUMN: Items are laid out vertically from top to bottom.

ROW: Items are laid out horizontally from left to right.

COLUMN_REVERSE: Items are laid out vertically from bottom to top.

ROW_REVERSE: Items are laid out horizontally from right to left.

COLUMN = 'column'

ROW = 'row'

COLUMN_REVERSE = 'column-reverse'

ROW_REVERSE = 'row-reverse'

class FlexWrap(*values)[source]

Bases: Enum

Controls whether flex items wrap onto multiple lines. If wrapping is enabled, the children must have a cross-axis dimension set (e.g., height for row direction, width for column direction).

NOWRAP: All items are kept on a single line (default).

WRAP: Items wrap onto multiple lines from top to bottom.

WRAP_REVERSE: Items wrap onto multiple lines from bottom to top.

NOWRAP = 'nowrap'

WRAP = 'wrap'

WRAP_REVERSE = 'wrap-reverse'