Flexbox

The flexbox is a container which allows creating horizontal or vertical 'lists' of components.

Configuration

Display content: Arrangement of content with regard to the flexbox area:

• Horizontal - components are shown as a horizontal list, aligned to the top of the flexbox
• Horizontal centered - components are shown as a horizontal list, aligned to the middle of the flexbox
• Horizontal full height - components are shown as a horizontal list, vertically stretched to the entire height of the flexbox
• Vertical - components are shown as a vertical list, aligned to the left of the flexbox
• Vertical centered - components are shown as a vertical list, aligned to the middle of the flexbox
• Vertical full width - components are shown as a vertical list, stretched to the entire width of the flexbox

Stretch content - if enabled, it stretches the components to fit to the full width or height of the flexbox, in the direction they are oriented, respectively. If any of the horizontal display content options are selected, the components will be stretched to the full width of the flexbox. Alternatively, if any of the vertical display content options are selected, the components will be stretched to fully fill the flexbox vertically.

Content spacing - the distance between individual components in the direction they are displayed.

Style

The style properties define the default look and feel of the component (i.e. no state is active or defined).

Background color - the background color of the component. A hex value can be input in one the formats:

• #RRGGBB
• #RRGGBBAA
• #RGB
• #RGBA

Where:

• R=red color component
• G=green color component
• B=blue color component
• A=alpha (transparency) component

Alternatively, the integrated color picker can be used to visually pick a color:

Border color - the color used for the component border.

Shadow - allows specifying a component shadow using the built-in shadow editor:

• X offset - the shadow horizontal offset in pixels (can be negative)
• Y offset - the shadow vertical offset in pixels (can be negative)
• Blur - the shadow blur radius. A higher value results in a blurrier shadow, while a lower value will result in a more sharp shadow.
• Color picker - the shadow color

Opacity - controls the transparency of the component.

Layout

Border width - controls the width of the border on each side. Values can be manually input as:

• <top>px <right>px <bottom>px <left>px
• <top_bottom>px <left_right>px
• <all>px

Alternatively, the built-in border editor can be used for a visual input:

Border radius: Border radius for the border corners. Values can be manually input as:

• <top-left>px <top-right>px <bottom-left>px <bottom-right>px
• <left>px <right>px
• <all>px

Alternatively, the built-in border radius editor can be used for a visual input:

Placement

The placement section controls the placement and stretching of the component:

Placement - the placement of the component:

• Absolute - the component will have fixed coordinates and size
• Stretch horizontal - uses fixed vertical position and stretches the contents horizontally
• Stretch vertical - uses fixed horizontal position and stretches the contents vertically
• Stretch - stretches the contents both horizontally and vertically
• Pin left - pins the contents to the left of the page, while keeping its size
• Pin middle - pins the contents to the middle of the page, while keeping its size
• Pin right - pins the contents to the right of the page, while keeping its size
• Pin top - pins the contents to the top of the page, while keeping its size
• Pin bottom - pins the contents to the bottom of the page, while keeping its size

Offset left - the left offset when using any placement except Absolute

Offset top - the top offset when using any placement except Absolute

Offset bottom - the bottom offset when using any placement except Absolute

Offset right - the right offset when using any placement except Absolute

Position

The position section contains properties which affect the position and size of the component. These can be changed by dragging and resizing the component with the mouse, or directly, by manually entering the values:

Left - distance from the left edge in pixels

Top - distance from the top edge in pixels

Width - component width in pixels

Height - component height in pixels