Contents

Positioning 

To control the position of objects on a screen, Relative and Absolute positioning can be used. 

• Relative Positioning, sets a position relative to other objects on the screen (Recommended).
• Absolute Positioning, sets objects to a specific position. This is typically only used for specific scenarios, such as, setting the position of a logo.

Relative Positioning (Recommended)

Relative Positioning means that objects are positioned according to the normal flow of the screen and relative to the other objects.

The example below illustrates this. The flow, also referred to as the Direction, is set to Row and three items exist on the screen already, the addition of a 4th object would be placed at the end of the row.

To achieve relative positioning in PhixFlow we predominantly use CSS Flexbox.

Flexbox Layout

Using Flexbox makes it easy for us to create great-looking screen designs with only a few button clicks, and for more advanced users CSS properties can be added to suit. Flexbox allows us to specify the size of the content and/or have the layout dynamically respond to the size of the screen on a device.

Flexbox is made up of a Parent Container and Child Objects. The parent determines how the children are positioned.

Flexbox Setup

To determine how objects (Child Objects) held within an area (Parent Container) are positioned, configure the Style Settings on the  Styles tab for the area. 

It is important to understand that the below configuration options work with the other styling settings of the parent and the child objects, and therefore some options may require other settings to be changed also. For example, assigning each component an Order number in the Style Settings will determine which component comes first, second and so on, in the Direction set.

Direction

This is set on the parent container. By enabling this option PhixFlow automatically sets up the flex layout, and the direction of flow of the child items.

•  Row: components are placed next to each other horizontally, from left to right
•  Reverse Row: components are placed next to each other horizontally, from right to left

•  Column: components are placed below each other vertically, from top to bottom
•  Reverse Column: components are placed below each other vertically, from bottom to top

Wrap

This is applied to the parent and it tells the child objects what to do if they cannot fit on to one line, for example, when the current row or column is filled, or when the screen size changes.

•  on: components flow onto additional rows or columns, rather than staying on one line and disappearing off-screen
•  off: components stay on one line and can disappear off-screen 

Gap

• Defines the size of the gap between components

Justify

This determines where components are placed in relation to their siblings.

The Justify and Align (see below) options and how they are applied are directly linked to the Direction property. For example, Justify set to Flex Start, with a Direction of Row will start the child items from the left, whereas if applied to a column the child items start at the to. The Style Setting icons reflect this. 

•  Flex Start (Row) or  Flex Start (Column): components are positioned at the beginning (according to the direction) of the parent container, e.g. left where Direction is set to Row

•  Flex End (Row) or  Flex End (Column): components are positioned at the end of the parent container, e.g. bottom where Direction is set to Column

•  Center (Row) or  Center (Column): components are positioned in the centre of the parent container, along the main axis

•  Space Between (Row) or  Space Between (Column): components are positioned evenly in a line, e.g. the first item is at the start of the line, the last item is at the end of the line, with space between them

•  Space Around (Row) or  Space Around (Column): components are positioned with equal space before, between, and after them. Note: visually the spaces aren’t equal, since all the items have equal space on both sides

•  Space Evenly (Row) or  Space Evenly (Column): components are positioned so that the spacing between any two items (and the space to the edges) is equal

Align

Alignment specifies the default alignment for components within the parent container. For example, Stretch tells each component to expand to fit the available space. If all components fit on one row, then the components extend to fill the vertical space. If components have to wrap to form a second row, each row will occupy half the vertical space.

•  Flex Start (Row) or  Flex Start (Column): components are aligned at the top of the container
•  Flex End (Row) or  Flex End (Column): components are aligned at the bottom of the container
•  Center (Row) or  Center (Column): components are aligned in the middle of the container
•  Stretch (Row) or  Stretch (Column): components are stretched to fill the container perpendicular to the Direction, respecting the min and max sizes of the children

Absolute or Fixed Positioning

Absolute Positioning means that components are removed from the normal flow of the screen (direction) and given a fixed position on the screen, independent of its siblings. 

In the example below, component 2 has been given an absolute position of Top: 30px and Left: 100px. These values place the component 30px from the top and 100px from the top left corner of the parent area. The sibling components are relatively positioned into the screen flow.

• To set a fixed position for a component, on the  Styles tab under Style Settings,  tick and  toggle on Absolute Position, and enter values

Vertical Position (Stack Order)

To change which components are in front or behind each other, use z-index.

• z-index: this is a whole number, where the higher the number, the further in front the component will appear 
  • For example, items with a z-index of 20 will appear in front of items with a value of 10

Further Reading

• To set position settings as part of an app-wide shared style, see Screen Styling