Flex Feature

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

Important Note: Gen 2 Layout will be available exclusively for Pay-as-you-go pricing model (slot plans).

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.

Additional Resources

• PageFly Element Styling | Ultimate Guide to Edit Effectively
• How to Use PageFly Custom Code Editor?
• 7 Steps to Create a Homepage with PageFly