Element Settings: Flex Container Settings

The Flex Container is a special container box that will allow you to optimize the arrangement of the elements added to that section more flexibly than our editor's usual columns and rows. This article will cover the Flex Container settings that make it special and customizable. 

Requirements: 

• An active ClickFunnels 2.0 account
• A ClickFunnels page
• A Flex Container area

TABLE OF CONTENTS

• Paint:
• Desktop and Mobile View buttons:
• Width:
• Height:
• Direction:
• Justification:
• Align items:
• Gap:
• Wrap:
• Supported Elements:

Paint:

The paint feature allows you to select from one of the predefined style theme backgrounds.

You can choose from the following options: None Background, Lightest Background, Light Background, Colored Background, Dark Background, and Darkest Background.

 You can learn more about the style themes and how to set them here. 

Back to Top

Desktop and Mobile View buttons:

The Desktop and Mobile buttons will allow you to control settings and preview how your flex container would look like both for mobile and desktop.

Note: Please consider that the live aspect of your flex container might look different on other devices with different screen sizes or screen rations.

Back to Top

Width:

The Width feature controls the width of the flex container. You can switch between percentage and pixels or set the width to “auto” by clicking the unit icon.

To adjust the width, drag the slider or enter a number into the field to the right.

Back to Top

Height:

The Height feature controls the height of the flex container. You can switch between percentage and pixels or set the width to “auto” by clicking the unit icon.

To adjust the height, drag the slider or enter a number into the field to the right.

Back to Top

Direction:

The Direction feature establishes the main axis, thus defining the direction flex items are placed in the flex container. It basically allows you to change how the elements inside your flex container flow. 

You have the following options: row, column, row-reverse, and column-reverse.

Back to Top

Justification:

The Justification feature defines the alignment along the main axis. If the flex-direction is set to row or row-reverse, the main axis is horizontal. However, if the flex-direction is set to column or column-reverse, the main axis is vertical. 

You can select from one of the following options: 

• Flex-start. Will align all your elements to the starting direction set from the Direction feature mentioned above. 
• Center. Will center all your elements.
• Flex-end. Aligns the elements inside your flex container to the end. It will depend on the Direction set under the Direction feature mentioned above.
• Space-around. Items are evenly distributed in the line with equal space around them. Note that visually the spaces aren't equal since all the items have equal space on both sides. The first item will have one unit of space against the container edge but two units of space between the next item because that next item has its own spacing that applies.
• Space-between. Items are evenly distributed in the line; the first item is on the start line, and the last item is on the end line. There is no extra padding at the ends.
• Space-evenly. Items are distributed so that the spacing between any two items (and the space to the edges) is equal.

Back to Top

Align items:

The Align items feature will set the alignment along the cross-axis for the elements inside of your flex container. If the flex-direction is set to row or row-reverse, the cross-axis is vertical. However, if the flex direction is set to column or column-reverse, the cross-axis is actually horizontal.

You can select from one of the following options:

• 
  
  • Flex-start. This feature will align all your elements to where your flex container cross-axis starts. It’s directly related to the Direction feature option you have selected.
  • Center. This feature allows you to center all the elements inside your flex container along the cross-axis.
  • Flex-end. This feature will align all your elements to where your flex container cross-axis ends. It’s directly related to the Direction feature option you have selected.
  • Baseline. Will align all your elements to the same baseline or text line, like different font sizes on a doc file.
  • Stretch. To stretch the element size to occupy the whole flex container line along the cross-axis.

Back to Top

Gap:

The Gap feature affects the space between elements (both horizontally and vertically) inside the flex container.

Back to Top

Wrap:

The wrap feature determines if the items should be forced into fitting on one line or if they are allowed to wrap around if they take up too much space. 

Back to Top

Supported Elements:

These settings can be found in the following Elements: 

• Blank: Flex Container 

Back to Top