UI Flex Layout

W7 Assets

(0)
$12
Publisher W7 Assets
File size 226.25kB
Number of files 30
Latest version 1.0.3
Latest release date 2023-11-06 04:56:10
First release date 2023-07-03 07:32:11
Supported Unity versions 2018.4.2 or higher

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: [email protected]

Top Publisher Assets