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
Last updated
Was this helpful?
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
Last updated
Was this helpful?
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 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.
Defines alignment along the main axis. Distributes free space between flex children.
Defines cross axis layout on the current line.
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 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.
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 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
Override the alignment defined on its flex container parent individually for the child item.
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
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
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:
