UI Flex Layout

Publisher

W7 Assets

Please Note

This entry is from Monday July 15, 2024. The price of the asset may have changed since then.
Please visit our homepage for recent offers and sales. Official and private Unity Asset Store™ sales usually last about 14 days.

Overview

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