Flex Feature

In this manual, we will learn about the Flex feature and how to use it in some simple cases. 

About Flex FeatureClick to copy

What is Flex?

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

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 (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.

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 
  • 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 (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 Content 

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 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 (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.

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. Please check the flags on the page header.

I got it!
Explore how you can use PageFly to win this Christmas and Year-end sales Check now