Introduction

In this chapter we will learn everything about screen layouts from positioning options to ensuring our screen designs look great on all devices. This topic is delivered most effectively in a practical format, therefore to begin we will create a screen that will be used to illustrate the configuration options.

Create a Screen

1. From the screens home page create a new screen.
   1. Name, Invoicing.
   2. Template, Tile with Buttons.
2. Add two additional tiles to the screen. Use the Blank - Column template from the palette.
3. The screen should look like this:
   1.  

Flex Layout

PhixFlow utilises CSS flexbox to layout content on a screen. This makes it easy for us to create great looking screen designs with only a few button clicks, and for the more advanced uses the CSS can be customised to suit. Flexbox allows us to specify the size of content and/or have the layout dynamically respond to the size of the screen on a device.

Flexbox is made up of a Parent and Children. The parent determines how the child items are positioned. In the example we created, there is a Tile Container which is the parent, and tiles which are the children. Lets look at the options 

Direction

The first option is the Flex-Direction, simply called Direction in PhixFlow. This is set on the parent object. By enabling this option PhixFlow automatically sets up the flex layout, and the direction of flow of the children items is set. This is illustrated below:

Row  

Column

To see this in PhixFlow:

1.  In the layers section, click on the Tile Container.
2. The properties one, click on the Styles tab.
3. Scroll Down until you see the flex options:
   1. 
4. Change Direction to Column, and click  OK.
5. Switch the option back to Row and save the change.

Wrap

Flex wrap is applied to the parent and it lets the child objects know what to do if they do not all fit on one line. By default the children will try to fit onto one line. With no-wrap set content will stay on a single line, with wrap enabled content is allowed to wrap around as needed to be displayed. This is illustrated below. The screen size, content, size and minimum sizes set on the child items will determine if they will fit on one line. We will look at these settings later in this chapter.

To see this in PhixFlow:

1. The Tile Container is set to wrap.
2. Click on Tile and set its width to be 80%. As illustrated below:
   1. 
3. This does not leave sufficient space for the remaining tiles so one of them wraps to the next line. 
   1. This is caused as there is a minimum width (min-width) set on the tiles of 130px.
4. If you have a large monitor you may need to set the Tile container to be larger until the tiles wrap.
5. Remove the size settings applied.

Justify and Align

These settings determine how the child items will layout within a parent. The options available and how they are applied is directly linke dto the Direction property, for example Justify = Flex Start, applied to a row will move start the child items from the left where as if applied to a column the child items start at the top. Here are the descriptions for each property.

• Flex-start (default): items are packed toward the start of the flex-direction.
• flex-end: items are packed toward the end of the flex-direction.
• start: items are packed toward the start of the writing-mode direction.
• end: items are packed toward the end of the writing-mode direction.
• left: items are packed toward left edge of the container, unless that doesn’t make sense with the flex-direction, then it behaves like start.
• right: items are packed toward right edge of the container, unless that doesn’t make sense with the flex-direction, then it behaves like end.
• center: items are centered along the line
• space-between: items are evenly distributed in the line; first item is on the start line, last item on the end line
• space-around: items are evenly distributed in the line with equal space around them. Note that visually the spaces aren’t equal, since all the items have equal space on both sides. The first item will have one unit of space against the container edge, but two units of space between the next item because that next item has its own spacing that applies.
• space-evenly: items are distributed so that the spacing between any two items (and the space to the edges) is equal.

Responsive Design

Min/Max Sizes

Padding

Margin

Background Images

Design Approach