About Flex Feature
In this manual, we will explore the Flex Feature and its application in various scenarios. Flex, often known as flexbox, is a layout model designed to distribute space between elements within a container efficiently.
In the PageFly editor, you can use Flex to organize or align elements inside columns, rows, and sections.
You can check more details in the video tutorial below.
Legacy Layout – How To Access Flex Feature
To enable the Flex feature of a container, for example we will use Flex on the column containing the product information:
- Step 1: Click on the Column (container)
- Step 2: Switch to Styling tab
- Step 3: Select Flex for Display type
How To Configure For Flex Feature
This feature can be complex to utilize, so it is recommended 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 you to arrange elements within a container either in horizontal rows or vertical columns. All of the options are listed here.
| Option | Description |
| Row (default) | All elements are displayed horizontally, as a row, left to right |
| Row reverse | Same as Row but in reverse order (right to left) |
| Column | All elements are displayed vertically, as a column, top to bottom |
| Column reverse | Same as Column but bottom to top |
You can see the difference between the options here
Flex Wrap
If you select 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. These are all of the available options
| Option | Description |
| No Wrap (default) | All 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 |
You can see the difference between the options here
Align Items
This option determines how the elements are arranged along the container’s axis. Here are all the options.
| Option | Description |
| Center | All elements are positioned at the center of the container vertically |
| Flex start | All elements are positioned at the beginning of the container vertically |
| Flex end | All elements are positioned at the end of the container vertically |
| Stretch (default) | All elements are stretched to fit the container |
| Baseline | All elements are positioned at the baseline of the container |
You can see the difference between the options here
Align Content
Align Content allows you to align a flex container’s lines when there is extra space within the container’s height.
Please note that this option only affects multi-line containers where Flex Wrap is set to either wrap or wrap-reverse.
All of the options are listed here.
| Option | Description |
| Center | All elements are packed toward the center of the flex container |
| Flex start | All elements are packed toward the start of the flex container |
| Flex end | All elements are packed toward the end of the flex container |
| Stretch (default) | All elements stretch to take up the remaining space |
| Space around | All elements are evenly distributed in the flex container, with half-size spaces on either end |
| Space between | All elements are evenly distributed in the flex container |
You can see the difference between the options here
Justify Content
This option allows defining the alignment along the horizontal axis of the container. It modifies the white space that appears between lines of text. These are all of the available options
| Option | Description |
| Center | All elements are positioned in the center of the container horizontally |
| Flex start | All elements are positioned at the beginning of the container horizontally |
| Flex end | All elements are positioned at the end of the container are horizontally |
| Stretch (default) | All elements are stretched to take up the remaining space |
| Space around | All elements will have equal space before, between, and after them
|
| Space between | All elements are evenly distributed; the first element is at the beginning and the last element at the end of the container
|
You can see the difference between the options here
Gen 2 Layout – How To Access Flex Feature
With the PageFly 4.16 version, we have released an advanced editor using the CSS Flexbox layout model with flex sections and flex blocks. For a more thorough tutorial, you can read the Page Editor – Styling Tab article or watch How To Use PageFly Gen 2 Editor with Flex Section video.
Common Cases
Placing Two Elements on the Same Row
In some common cases, you might want to place 2 elements on the same row, Flex feature can help you achieve this. For example, we will put the product price element and the save badge on the same row
- Step 1: Create a Block > Put the product price and the save badge inside it
- Step 2: Click on Block > In Styling tab enable Flex feature
- Step 3: Set Flex Direction to Row
- Step 4: To center the pieces vertically, select Center from the Align Items parameter. Next, select flex-start under Justify Content to align the items at the start of the block horizontally
Aligning the elements in the center of Column
You can use the Flex feature to center your elements in a Column or a Block, such as a heading and a paragraph element in the right column. Simply follow these instructions to achieve this
- Step 1: Go to the breadcrumbs and select the Column
- Step 2: Choose Styling tab > Display > Select Flex and set Flex Direction: Column
- Step 3: Select Center for Align items and Justify content
These are all of the Flex setting’s features. 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
1. What is the flex Feature?
The flex feature calculates the extent of the part using a bounding box.
2. What are the benefits of Flex features?
It helps sellers to arrange elements better.
3. What’s the difference between the Flex features in the Legacy and Gen 2 layouts?
Flex Layout
The Gen 2 editor, by contrast, is built around a fully flexible container system that eliminates the need for rows and columns. In Gen 2, you can use nested flex containers, giving you much more freedom in how elements are positioned and aligned. This allows for truly custom layouts where elements don’t have to be confined to specific grid units. The Gen 2 Flex Layout introduces advanced flex controls for:
- Complete control over alignment and positioning of elements on different screen sizes.
- No row/column restrictions, so users can place items more freely.
- Enhanced control over flex-direction, wrapping, and ordering, allowing for dynamic layouts that adapt smoothly to different devices.
Legacy Layout
In the Legacy layout, the Flex feature is available, but it is more limited in scope. You primarily work within a grid-based system where rows and columns are predefined. While you can align and justify elements (e.g., center, stretch), you still need to rely on rows and columns to structure your page. The legacy editor allows basic Flexbox controls, like setting direction (row or column) and adjusting spacing (using the Justify Content and Align Items properties), but it’s restricted to a more rigid structure.
Previous article
