Work with flexbox

One of the important basic concepts of Appfarm's UI Editor is the flexbox layout. It is important to understand the basic concepts described in this guide to be able to fully leverage the power of App

Flexbox is also known as flexible box layout. It is a powerful way to align items inside a container, as well as distributing spacing among them, by giving the flex container ability to alter its children items height and width to best fill available space. The content inside a flex container can be stacked along the horizontal axis (default), or along the vertical axis.

Important terms: A container with the display option set to flex is called a flex container. A direct child (any UI Component) of a flex container is called a flex child. These terms are important to remember to understand the concepts described in the rest of this section.

Flex container settings

Flex is enabled on a container by setting display settings to Flex. After flex is activated, a set of flex options will appear. Have a look at the symbols of these options. They should give a pretty good indication of what visual effect they will have on the flex children.

It is important to understand that enabling flex on a container affects the layout of it's children, and not the container it self.

After turning on flex, you will among others be able to control direction alignment and justification of the items.

Justify Content

Defines alignment along the main axis. Distributes free space between flex children.

Align Items

Defines cross axis layout on the current line.

Child Wrap

The items will by default try to fit into one line. You can allow the items to wrap when needed by the wrap property

Align Content

Align the lines within the flex container when there is extra space in the cross-axis. This property only has effect when wrap is activated and there are more than one line of items.

Gap

Use this setting to set a fixed gap between the rows and/or columns inside this flex container. The first setting is the gap between rows (vertically), and the second is the columns (horizontally). Click the connect icon for equal spacing for both rows and columns.

Flex child settings

Flex children are direct children of a flex container. Flex children are by default controlled by its parent flex container's layout settings. Flex children will have

Alignment

Override the alignment defined on its flex container parent individually for the child item.

Size - Grow and shrink

Tell the flex child how to stretch inside the flex container within the flex containers free space.

• Stretch - Grow if possible

• Shrink - Shrink if needed

• No-shrink - Don't shrink

• Advanced - Define customized grow and shrink behavior

  • Grow - Defines the items ability to grow if necessary relative to its siblings. 0 means don't grow, 1 means distribute remaining space equally between children, 2 means take up twice as much space as siblings:

  • Shrink - Defines the items ability to shrink if necessary

  • Basis - Defines the default size of an item before the available space is distributed among the elements in a flex container