Element Settings: Flex Child

A Flex Child is any element that is placed inside a Flex Container. Each one will have access to their own Flex Child settings that can be changed independently.

Important Note: The exact behavior of these settings can vary depending on how the Flex Container Settings are configured, such as Flex Direction, Align Items, Wrap, etc. Individual element settings, such as Width or Flex Basis, can also affect the behavior.

Important Note: Most settings are related to extra or insufficient space within the container. Therefore, if there are neither of these issues while viewing from your display, then you will not notice anything happening. However, it is important to be aware of varying screen sizes and how these settings affect them.

Requirements:

• An active ClickFunnels 2.0 account
• A Page with a Flex Container
• At least one Element inside the Flex Container

TABLE OF CONTENTS

• Flex Grow:
• Flex Shrink:
• Flex Basis:
• Align Self:
• Supported Elements:

Flex Grow:

The Flex Grow setting determines if an element should be allowed to grow to fill extra space in the container. It accepts a unitless value representing a proportion it should grow in relation to the other flex children of the same flex container. The default is zero; elements will not grow to fill extra space.

For example, if all items have flex-grow set to one, the extra space in the container will be distributed equally to all children. If one of the children has a value of two, that child will take up twice as much of the extra space as the others (or it will try, at least).

Examples:

Back to Top

Flex Shrink:

The Flex Shrink setting determines if an element should be allowed to shrink if the container has insufficient space. It accepts a unitless value representing a proportion it should shrink in relation to the other flex children of the same flex container. The default is one; elements shrink at the same rate together. Setting this to zero means the element will not shrink at all.

Important Note: Certain elements have no defined width, in which case you must set a Flex Basis to notice any effect.

Example:

Back to Top

Flex Basis:

The Flex Basis setting sets the default size of an element before the remaining space is distributed. It can be a number in either pixel units or a percentage. This can also be set to “auto”, which will simply try to check the element’s Width or Height setting (if it has any).

Example:

Back to Top

Align Self:

The Align Self setting allows each element to override the flex container’s Align Items property. This is the alignment along the cross-axis. By default, no Align Self setting is used, meaning the container’s Align Items property is inherited and used.

Important Note: If there is no space along that axis for alignment to make a difference, you will not notice any effect.

Example:

Back to Top

Supported Elements:

This setting can be found in any element placed inside a Flex Container.

Back to Top