Difficulty: Standard
The layout algorithm controls all of the core CSS Flex behaviour.
In Flexbox4Unity you have to choose which layout-algorithm you want to use. By default, new installs use the newest, most-recent algorithm – but there are times when you’ll want to override that and choose a different one.
Am I using the latest algorithm?
If you’re using an old, out-dated, algorithm then Flexbox4Unity will warn you in the Inspectors (Note: I plan to make this warning a bit more intelligent in future versions). If you upgraded from an earlier version of F4U then you probably will have an old layout-algorithm.
The warning also has a button you can click that will automatically switch your entire project over to the newest algorithm.
Why doesn’t it auto-upgrade the algorithm?
New algorithms often fix small bugs in the layout. For new projects, that’s great!
But … If you’ve built many screens of your game UI with an old algorithm, you might have sized things based on the bugs. If you upgrade to the new algorithm, some of your screens will now look wrong. If you didn’t need the new features of the new algorithm, even though it’s ‘better’, it’s worse for you: now you have to re-build them all by hand.
Most Unity Assets do this to you all the time. I find it annoying and a big waste of my time as a developer. So, instead, Flexbox4Unity leaves it up to YOU to decide when to change layout algorithm.
Installing a different Layout Algorithm
Layout Algorithms are configured in “Project Settings”
- Open the UnityEditor’s ‘Project Settings’ and select ‘Flexbox’.
- Find a LayoutAlgorithm asset in your Project window that you want to use
- NOTE: you can click on a LayoutAlgorithm asset to view it in the Inspector, each one has a short description of its advantages etc.
- Drag/drop your chosen LayoutAlgorithm asset into the Project Settings in the ‘LayoutAlgorithm’ section
- NOTE: old versions of the layout API have different slots for you to drag/drop your asset onto. Don’t worry – you can’t get this wrong, it will prevent you dropping one in the wrong place – but if you’re using an older algorithm you might have to drop it into one of the upper slots instead of the lower one.
As soon as you’ve done the drag/drop the project should immediately update automatically.
Can I change back?
Yes – it’s a simple drag/drop to switch back to your previous version.
Choosing an Algorithm
Why are there multiple layout algorithms?
The default algorithm is always the ‘best’ on average – but it’s not perfect. For instance, if you never use Flex-Wrap then there’s a faster implementation of the main algorithm (if you’ve been using Flexbox4Unity since the early versions you might still be using the non-wrapping algorithm).
I occasionally add algorithms that are faster, or more precise, sacrificing one for the other. At any moment you can change the algorithm with simple drag/drop in the UnityEditor, and see if it works better for you – if not, you can easily switch back.
Which algorithm is right for me?
As of Summer 2021, there are three major Layout Algorithms:
- v2.3.3 — fastest, but is missing some of the Flexbox features
- v3.4.2 — default for new installs: has most of the Flexbox features, and is fast enough for most projects
- v4.0.2-alpha — very high accuracy, but a lot slower
(there are a lot of older ones that you might have if you’ve been using Flexbox4Unity for a while, but for new projects you should only be using one of the above).
v2.3.3 – Raw speed, no Wrapping, limited Margins/Padding
For basic layouts this works fine and runs very fast. However, there are so many weaknesses that I highly recommend you use 3.4.2 instead (unless you’re already using v2.3.x and find it works OK for you).
v3.4.2 – Current recommended, but has problems with ScrollViews/ScrollRects
This algorithm is the one used by most projects. It supports Margins, Padding, Flex-Wrap, and min/max Width and Height, etc.
However … complex padding/margins layouts can sometimes go wrong, and it has a lot of difficulty auto-sizing for Unity’s ScrollRects and scrollbars. If you’re having problems with scrollview, or if you see a padding/margins that seems wildly wrong, try the v4 algorithm instead.
v4.0.2-alpha – early-access, very high accuracy
This algorithm should work perfectly with all scrollviews (extensively tested already!), and has a completely rewritten padding/margins system for high accuracy.
… but: integrating with Unity’s scrolling system has caused a big slowdown in the raw performance.
Note: I plan to make this the default algorithm for the v4.0 release of Flexbox4Unity (currently in-development). If you find any bugs in this algorithm, let me know ASAP and I will fix and send you an updated version to try!
Writing a custom Layout Algorithm
If you want to customize an existing algorithm or create one of your own, I highly recommend you create a new one (this will preserve your changes even when upgrading to new versions of Flexbox4Unity). There is some old information on doing this (2020), but if you’re trying this today I recommended contacting me via email or discord (click the SUPPORT link at top of page) and I can give you more detailed help and advice with this.