In this manual, we will learn about the Flex Feature and how to use it in some simple cases.
You can check more details in the video tutorial below.
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
In the PageFly editor, we have a feature under Display Style called Flex. This feature is complicated to apply, and we recommend it for advanced users only. When you enable Flex, we will have some options below:
- Align Items
- Align Content
- Justify Content
Now we will go through each setting and how they work
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
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.
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
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
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
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.
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
Above are all the functions of Flex setting. You will have a different flex layout with each different combination of options. If you have further questions, please message us on our Live Chat support.
The flex feature calculates the extent of the part using a bounding box.
It helps sellers to arrange elements better.