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.

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.
• Maintaining aspect ratio with dynamic sizes is difficult.

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: w7assets@gmail.com