About Flex Feature
Summary: In this manual, we will learn about the Flex Feature and how to use it in some simple cases. 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
You can check more details in the video tutorial below.
How To Configure For Flex On PageFly?
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:
- Direction
- Wrap
- Align Items
- Align Content
- Justify Content
Now we will go through each setting and how they work
Flex 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: 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
Flex 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
- Flex 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: 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
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.
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
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: 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.
- Stretch: lines stretch to take up the remaining space
- Center: elements are centered along the line
How Does Flex Work 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.
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 Column.
- 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.
Tips And Best Practices
- Before applying Flex styles, determine the desired layout for your content (e.g., columns for product listings, rows for team introductions). This helps you choose the appropriate Flex options.
- Begin with basic Flex layouts (like single-direction rows or columns) and gradually add complexity as needed. Complex layouts can be challenging to manage visually.
- Consider how your Flex layouts will adapt to different screen sizes (desktop, mobile).
Frequently Asked Questions
What Is The Flex Feature?
The flex feature calculates the extent of the part using a bounding box.
What Are The Benefits Of Flex Feature?
It helps sellers to arrange elements better.
