UI Flex Layout

A layout system driving UI rect-transform components. Suitable for many UI layout cases. Dynamically shrinks, wraps or grows items by their containers. Features are designed to reflect CSS' Flexbox behavior, with a few additions to improve customization.

Flex-Container Features:

• Direction (Horizontal and Vertical) with reverse option.
• Wrapping and Reverse-Wrapping
• Justify-Content
• Align-Content
• Align-Items
• Minimum Gap*
• Padding*

Flex-Item Features:

• Flex-Order
• Flex-Grow
• Flex-Shrink
• Flex-Basis*
• Minimum Size* and Maximum Size*
• Align-Self
• Margins*

* Sizes are validated dually (Relative Percentage + Constant in Pixels)

Includes a Flex Linker component which acts like a content size fitter, fitting flex-item sizes to its sub-container item sizes.

New feature in version 1.1.0! The Flex Aspect Ratio component now makes it easier to maintain or change the aspect ratio of an item, also with dynamic sizes.

Performance

• Optimized to compute only when required.
• Works with Unity's layout passes to minimize recomputing.

Other Features

• Unity Animations supported.
• Sub-containers fully supported.
• Retains pivot points.
• Includes full source code.

Limitations

• Mainly for Axis-Aligned UI components.
• CSS Flexbox 'Baseline' function is not available.
• May not work with Unity's built-in layout components correctly.

Documentation

To familiarize yourself with with Flexbox, I recommend this online guide:

A CSS Guide To Flexbox

The documentation for this asset is also publicly available:

UI Flex Layout Documentation

CONTACT

Email: [email protected]