Welcome to the new standard of design flexibility in Uncode. The Flexbox and Flexbox Inner modules represent a major evolution of our Page Builder, introducing a level of structural control and nesting possibilities previously impossible. 

Until now, page structure was primarily defined by the classic hierarchy of Rows and Inner Rows. With the introduction of the Flexbox modules, we are breaking these barriers. These new tools add two additional levels of nesting, allowing you to create intricate layouts that adapt perfectly to any modern design requirement.

We’ve designed these modules to give you total structural freedom by allowing for maximum nesting, effectively adding up to two extra levels of depth within your Rows. This is paired with native Flexbox methods, which lets you easily manage direction, alignment, justification, and element wrapping directly from the visual interface. 

Please find below a simple example page from our demo site:

• Flexbox Container

Understanding Flexbox

If you are new to Flexbox, don’t worry! While the options might seem technical at first, they follow a very logical structure based on two axes: the Main Axis (Direction) and the Cross Axis (Alignment).

To help you master these concepts, we highly recommend the A Complete Guide to Flexbox by CSS-Tricks. It is the industry-standard resource that visually explains how properties like Justify Content and Align Items interact to create perfect layouts:

• A Complete Guide to Flexbox 

Flexbox options

These are the primary options of the Flexbox module, screenshot :

• Direction: Defines the main axis along which the items are placed (Row, Column, or their reversed counterparts).
• Wrap: Controls whether the items should wrap into multiple lines or stay on a single line.
• Justify Content: Manages the alignment of items along the main axis, distributing extra space between or around them.
• Align Items: Sets the alignment for items along the cross axis (e.g., centering items vertically within a row).
• Align Content: Adjusts the alignment of the flex lines when there is extra space in the cross axis (active when Wrap is enabled).
• Gap: Defines the spacing between items, allowing you to set consistent gutters without manual margins.
• Tablet & Mobile Overrides: By checking these options, dedicated tabs will appear, allowing you to redefine any of the above settings specifically for tablet or mobile breakpoints.

Flexbox options

These are the additional options for the Flexbox Inner module, in addition to the settings already available in the Flexbox module, screenshot :

• Self Align: Allows an individual item to override the container's "Align Items" value, giving you granular control over a single element's position.
• Flex Grow: Determines how much the item should grow relative to the rest of the flex items if there is extra space available.
• Flex Shrink: Defines the ability of the item to shrink if the size of the container is too small.
• Flex Basis: Sets the initial main size of the item before the remaining space is distributed.
• Order: Controls the visual order of the item within the flex container, regardless of its position in the HTML structure.