Flex, usually referred to as flexbox, is designed to be a method of space distribution between elements in a container. In PageFly editor, you can use Flex to distribute or align elements inside columns, rows and sections

Flex configuration

In the PageFly editor, we have a feature under Display Style called Flex. This feature is quite complicated to apply and we recommend it for advanced users only. When you enable Flex, we will have some options below:

Direction
Wrap
Align Items
Align Content
Justify Content

Now we will go through each setting and how they work

Direction

Flex direction allows users to set all elements within a container either in horizontal rows or vertical columns. Here are all the options.

Row (default): left to right in one row
Row-reverse: Same as “Row” but in reverse order
Column: same as row but top to bottom
Column-reverse: same as row-reverse but bottom to top

Here is a demonstration.

Wrap

In the PageFly editor, if you choose Flex, by default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed. Here are all the option:

No Wrap (default): all flex elements will be on one line
Wrap: flex elements will wrap onto multiple lines, from top to bottom. Please note that elements only wrap when there is no space to stay on the same line
Wrap-Reverse: flex elements will wrap onto multiple lines from bottom to top.

Align items

This option defines how elements are laid out along the axis of the container. The direction of the axis depends on your flex direction setting which is mentioned above. Here are all the options.

Stretch (default): Elements are stretch to fill the container (still respect min-width/max-width)
Flex Start: elements are placed at the start of the cross axis.
Flex-end: elements are placed at the end of the cross axis.
Center: elements are centered in the cross-axis
Baseline: elements are aligned such as their baselines align

In this example, the cross axis is vertical because the flex direction is set as Column.

Align Content

This option allows us to align a flex container’s lines within when there is extra space in terms of container’s height.

Please note that this option only takes effect on multi-line containers, where flex-wrap is set to either wrap or wrap-reverse.

Here are all the options:

Flex Start: elements packed to the start of the container.
Flex End: elements packed to the end of the container.
Center: elements centered in the container
Space Between: elements evenly distributed; the first line is at the start of the container while the last one is at the end
Space Around: elements evenly distributed with equal space around each line
Stretch: lines stretch to take up the remaining space

Here is a demonstration.

Justify Content

This option allows us to define the alignment along the horizontal axis of the container. It helps distribute extra free space leftover between elements on a line. Here are all the options:

Flex Start (default): elements are packed toward the start of the flex direction.
Flex End: elements are packed toward the end of the flex-direction.
Space Between: elements are evenly distributed in the line; first element is on the start line, last element on the end line
Space Around: elements are evenly distributed in the line with equal space around them.
Center: elements are centered along the line

Here is a demonstration.

How Flex works in containers

Row

In some common cases, you want to make the text above the image (mostly on mobile devices), you can use Flex to achieve this:

Go ahead to the breadcrumbs, choose Row.
On the right sidebar, go to Styling > Display > Choose Flex. In Direction, choose Column Reverse.

Flex featureFlex feature

Column

Commonly, when you want to display the item in a horizontal direction, Flex can help you to do it like this instruction:

Go ahead to the breadcrumbs, choose Row.
On the right sidebar, go to Styling > Display > Choose Flex. In Direction, choose Row Reverse
In Align Items, choose Center

Flex feature

Above are all the functions of Flex setting. With each different combination of options, you will have a different flex layout. If you have further questions, please drop us a message on our Live Chat support.

Flex Feature