Flex Feature

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.


 

About Flex FeatureClick to copy

What is Flex?Click to copy

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 configurationClick to copy

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

DirectionClick to copy

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.

WrapClick to copy

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 itemsClick to copy

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 ContentClick to copy

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 ContentClick to copy

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

RowClick to copy

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

ColumnClick to copy

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.

Navigate this category

Next articlePrevious

Feedback
Thank you for your feedback!

Could not find the answer
to your question?

Chat with us
PageFly Languagues

PageFly Help Center is now available in Chinese, French and Japanese. Please check the flags on the page header.

I got it!
Boost Father's Day Sales: Utilize PageFly's templates to create captivating pages that drive results - Discover Now