When you are designing GUI screens for an application, it can be tricky to get the various components to size and to change in response to different screens (desktop or mobile).

Positioning

Position settings can be:

• absolute, where set the location of a component with in its parent.  This can be useful for logos, but remember it prevents the component from flowing with other things on the screen.
• relative, the component is positioned relative to siblings. This allows items to flow or flex as the screen size changes.

Fixed

To make a layout component fixed, you can use the options available in the following sections of the layout component properties.

• Position Settings: applies only to this component
• Shared Styles: applies to any component that shares the style
• CSS Properties

For example to fix something to the top left of its parent area, set Top to 0 and Left to 0.

Relative

In this case the parent area properties are influencing how the child objects are positioned on the screen.

To set how components align, use Style Settings → Direction

• Row puts components next to each other until the horizontal space is filled. It will then start a new row.
• Column puts components below each other until the vertical space is filled. it will then start a new column.

For maximum flowyness

Wrap: Wrap

Justify: jFlex Start

Align:Stretch

Using Flex box

Position Settings (Object Level)
o Value entered directly into the fields in PhixFlow and get applied to the selected object.
The CSS is constructed using all of these elements each adding and overriding to the elements before it.
Positioning (Video: Positioning)
• Absolute
o the element is positioned absolutely to its parent. This can be thought of as a fixed position as the element will be taken out of the flow.
 Example use: positioning a logo.
• Relative
o The element is positioned relative to its normal position and siblings. The design can be thought of as flowing (or flexing).
 Example use: applied to elements such as fields that will be used to create a responsive application.

Sizing (Video: SizingObjects)
Absolute and Relative also applies to sizing:
Absolute Size
Set using Position Settings and setting these values using a CSS Style e.g. Shared Style
Relative Size
Relative sizing provides a size relative to its siblings and can also be controlled by its ancestors e.g. a parent area can be set to stretch its children.
• Percentage: This can be set using percentages %, or by implementing CSS Flexbox, float or grid. For example: width 50%, an item will take up 50% of the space provided by its parent.
• Auto size: will consume all available space from the parent, when and only when the parent has Flexbox properties set. Further to this the space consumed will be perpendicular to the Flex e.g. If the parent is set to Flex Row, and the child has auto size ticked, then the child will consume the available space vertically.
• Content Sizing: a parent element will be expanded to accommodate its children. While Auto Size consumes the available space, content sizing will push beyond the available space. Note that Content sizing is not a setting but the lack of an auto size or other constraint being set.

Flex Box (Video: Flexbox)
Column
The content is laid out vertically in a column:
• Wrap: Starts a new column when the existing column is full.
• Justify: Where the content will be placed vertically.
• Align: Where the content will be aligned horizontally
a. Stretch can be selected here to have this object stretch the objects inside it in the direction of the flex i.e. in a column.
Row
The content in laid out horizontally in a row:
• Wrap: Starts a new row when the existing row is full.
• Justify: Where the content will be placed vertically.
• Align: Where the content will be aligned horizontally
a. Stretch can be selected here to have this object stretch the child objects inside it in the direction of the flex i.e. in a row.
Auto size
Auto Size can be applied to objects to make them consume all available space perpendicular to the flex box direction from the parent, when and only when the parent has Flexbox properties set will auto size work.