[RELEASED] Flexbox (fast, easy layout, from HTML/CSS) in Unity 2019-2022

Asset store full version (with source code):

https://assetstore.unity.com/packages/tools/gui/flexbuilder-2023-245345​

Support website with tutorials / guides:

https://flexbuilder.ninja​

Online manual (200 pages!):

https://docs.flexbuilder.ninja
​

Current version: v4.3.0 (Launched: 2023)
In-development: v4.4.0 (ETA: Summer/Autumn 2023))

Complete rewrite for performance, usability, and accuracy (follows the CSS3 spec very closely now).

Intro/Getting-Started guide for people new to Flexbox:

http://flexbox4unity.com/2020/06/05/guide-using-flexbox-in-unity-2020/​

Build UnityUI's for your game faster, easier, and with much more power / control - all from the UnityEditor (no scripting required).

Quotes from current users:

"This is probably the best flex UI solution out there"
"Man! I love this."​

Runs faster than Unity's built-in UI (in complex layouts: up to 10x faster for the same content - the custom layout-engine is highly optimized compared to UnityUI).

100% replacement for Unity LayoutGroups: lets you rapidly and easily create and edit GUIs from inside the UnityEditor, while using standard UnityUI components, but with all the power of CSS Flexbox.

Core features:

• Fully compatible with the UnityUI layout system (can be embedded inside RectTransforms)
• Fully compatible with UnityEditor handles (has correct RectTransform values, all updated instantly)
• Highly optimized native implementation of HTML5/CSS3 Flexbox in Unity
• Requires no coding, no script - everything is done through the GUI
• Supports most of the 2018 official Flexbox standard (see below for details)
• Comes with 6 demo-scenes showing different setups, enabling you to directly test and debug layout challenges
  
• Available with and without source code (coming soon - pending Asset Store approval)

 

"Supports most of the official CSS.3-Flexbox standard"

Supported:

• basis (px, %, content, auto)
• box-sizing (border-box)
  
• width, height (px, %, auto/none)
  
• minWidth, minHeight, maxWidth, maxHeight (px, %, none)
  
• grow, shrink
• order
• padding (px, %, none)
  
• margins (px, %, none)
  
• direction (row, column, row-reversed, column-reversed)
  
• justify (start, end, center, space-between, space-around, space-evenly)
• align (start, end, center, stretch)
• boxSizing (content-box, border-box)

Currently in beta-testing:

• flex-wrap = wrap, wrap-reverse

Not supported:

• align = baseline (will never be supported: Unity text doesn't allow this)
• padding = auto
• margins = auto
• visibility:collapse (Unity has better built-in ways of handling this)

 

Version 2.0.0 now live - please upgrade if you haven't already

Main feature: Live preview of nested flex-structures, directly in the SceneView

Unity's built-in GUI only shows you the selection-shape/size for the current selection:



...but with Flex-Preview (enabled by default), you now see this:



...which makes it many times easier to edit large, complex, GUIs.

 

v2.1.0 released, live on asset store.

Main changes:

1. Created a modular layout-algorithm system, so from now onwards I can publish incremental updates to the layout algorithm, and if your game's GUI depends on any old (incorrect) behaviour, you can opt to manually roll-back to the previous algorithm with a single drag/drop from Project view to the ProjectSettings screen
2. Cleaned-up a lot of 1+ years old code when making the new modular algorithm system
3. ...and converted nearly all the semi-standard class-names and property names to the official CSS3 names

 

MAJOR UPDATE: v2.3.0 in beta-test (should be live in Asset Store in approx 48 hrs).

Adds full support for automatically laying-out all UnityUI elements, correctly, in all situations (even the ones where Unity itself fails to layout correctly!)

Finally! By using Flexbox4Unity instead of the default Unity Layout algorithm, you can have ... Unity's InputField, Text, Button, Toggle, Image/Sprite, etc ... all layout correctly!

Also includes: full rewrite of Margins and Padding, to fix all the edge-cases that were failing in previous versions.

Notes:

• The new layout algorithm fixes some bugs in the previous algorithms. But - what if you made a whole GUI for your game that depends on the old bugs? You already worked-around them? - No problem! The old layout algorithm still exists, just go to menu: Edit > Project Settings... > Flexbox, and drag/drop the old layout algorithm object from the Project pane onto the "Layout Algorithm" box.
• ... by default, Flexbox4Unity will not overwrite your current algorithm. But you will get a warning while editing if you are using an outdated / old algorithm.

Test scene doing fully automatic layout + sizing of all Unity's UI elements:

 

Added in beta-test: automatic creation of Unity ScrollViews, preconfigured to use the Flexbox layout system internally:

​

This gives you faster, automatic, scrollviews (like Unity's built-in ones, but better )

 

More from the 2.3 beta: automatic ScrollView creation, with self-sizing scrollareas, and no code needed (currently only implemented for vertical scroll, I'll add horizontal in the next update depending on demand):

 

UPDATE: v2.3 is now live with all the above improvements, and all the above screenshots + videos are included as DemoScenes you can test and use yourself.

 

UPDATE: v2.5 now in beta-test, mainly we're debugging flex-wrap.

** If you need flex-wrap support and aren't one of the people already getting beta-test builds with flex-wrap updates, please contact me ASAP so I can get you included. I want as many people testing the wrap support as possible, it's got lots of complexit in it! **

 

New website: http://flexbox4unity.com/

I'm now writing some tutorials and online guides for common tasks in Flexbox - if there's any task in particular you'd like to see a guide for, let me know and I'll try to include it. Current ones I have planned:

• Creating scrollviews which automatically resize and scroll, without writing code
• Creating tabbed-views/containers (like web-browser tabs)
• Embedding UnityUI in Flexbox (there's a couple of different ways you can do it)
• Embedding Flexbox in UnityUI (ditto)

 

Two new guides published on the http://flexbox4unity.com/ website:

1. Add an automatically-self-sizing UIScrollview powered by Flexbox
2. Write your own custom CSS Layout algorithm for Flexbox

 

I'm gathering requests + feedback for the next few releases. I have a super quick 5-question form - would be great if you could fill this out to help me plan what's next:

https://forms.gle/baidTNFuRjRVxjTWA

 

I have a question. I'm thinking about buying Flex4Unity later today to create something like this-


[ Similar to this ]

Where elements fill up the space of the parent. If any elements are resized the other element(s) change size to accomodate for the change.

Is that possible? I saw stretch being available in the paid version and was unsure if that would do it.

(Also this thread is not linked on the store page. I found it by accident.)

 

Yes, it will do that by default as soon as you create/add the child items.

Note that the way you "resize" elements in flexbox is that you tell flexbox how much length you want each one to have. The default is "as much as this item needs ... plus grow to fit if there's any leftover".

So if you set the first one to be N pixels long, the other three will take their minimum size, and then share the spare amount between them.

If you set the first to N pixels, the second to P pixels, the last two will share the spare between them.

Each item can also be told NOT to share any spare space (causes it to be exactly the size you specified). Sizes can be specifeid in pixels or as a percentage of the parent object's space.

 

PS: you can also specify relative stretches, e.g. tell the 1st one to take X% of spare space, the second to take 2X%, third to take 3X%, etc. But I have a feeling that's not working with the latest algorithm (I noticed last week that it appears to be ignoring the multiplier). You can easily use one of the older versions of the algorithm -you just drag/drop the different versions into the settings window, and it applies them immeidately (there's 4 old versions currently included in the asset, for bakwards compaitiblity for any projects that were depending on the old bugs/wrong behaviour).

The next update should have that fixed - but I'm mostly working on finishing the flex-wrap code, so that it can automatically flow/wrap boxes onto multiple lines.

 

I've updated the store page (pending Unity approving it) and added the missing links - thanks!

FYI: Next version should be sometime in the next 2-4 weeks, I'm currently beta-testing it with a few users (it has some nice improvements, but the flex-wrap feature broke some existing code, so I don't want to publish it until those bits are all working again - no regrssion bugs!)

 

Sounds like a deal. Hopefully it works. I wish it was easier to find this asset. I tried a few other UI solutions before this one even showed up in my asset store browsing.

I looked up flex-wrap last night. It looks like it can create a grid. You don't have to implement this just wondering because it doesn't seem like CSS does it. Is there a way to limit columns and/or rows? Such as wrapping to a new row after 3 items are created in a row?

 

If you have any advice on making it easier to find, or getting it in front of the eyeballs of the people who need it, I'm all ears .

Re: flex-wrap - it's mostly for auto-relayouting grids that change shape when you resize the window. Unlike grid layouts, each item can be a different size. If you force each item to be the same size (easy) then yes - it looks a lot like a grid layout, except that it's true Responsive Design (re-flows for smaller / larger windows, screens, devices).

Implementing it correctly is a bit of a nightmare though ... it requires lots of smart code around deciding how high each line is going to be, while still supporting auto-size-to-fit ... the official specification isn't easy to follow.

Current beta-testers are mostly using it for making level-select screens (eg one square button per level, on mobile games) and putting it inside a scrollview (which is automatically resized/shaped by Flexbox). But UIScrollview + flex-wrap + autosizing is giving me a lot of headaches right now, to make it fully automatic and work every time.

 

(incidentally ... one of my goals AFTER the next release ... is to make some example projects that show how you can make a single UI that works on desktop and mobile, using CSS responsive design techniques. I have some ideas of how to make this easy within UnityUI -- but until I have flex-wrap working, I can't try them out)

 

Working with UI even with the built-in tools can be a headache. I can't imagine making the tools. Good luck to you.

 

What extra features are offered by the pro version, aside from source access?

 

It's really the other way around: the pro version is the main one, and I make the Lite version available for people who want to "try before I buy". NB: If you install the Lite version ... it will tell you what is currently missing (context-sensitive - I've added infoboxes and warnings in any place where there's stuff that behaves differently).

If you're truly desperately poor, you could build a complete game using the Lite version - but I wouldn't recommend it. No indie or commercial game-developer is in that position, but there are e.g. students who would happily spend many tens of hours reinventing the wheel just to save a few tens of dollars (I was once one of those people myself ). I don't think it's smart (I learned the hard way), but if they choose that route, they can use the Lite version.

Approximately, the Lite version:

• Only has the absolutely essential parts of Flexbox, without which it CANNOT work (i.e. it should always be enough for you to create basic layouts, and see how the system works, and decide if you like it or not)
  
• Doesn't have any quality-of-life improvements - e.g. I'm starting to add pre-made templates that create common GUI features for you in 1-click (e.g. I have a TabbedContainer I'm currently beta-testing. e.g. I have "vertical scrollview", "horizontal scrollview", and "2D scrollview"). Each of these you can create yourself - but they take anywhere from 30 seconds to a few minutes each time you need them, and you need to make them often ... so I'm turning them into instant-templates.
  • (no-one "needs" this ... it makes the process of building UI's a little quicker - but a lot more enjoyable)
  • NB: the first templates should appear in May as a free update for existing purchasers - I will continue to add more over time, it depends how long it takes to fully debug + test each one.
• Doesn't have any "advanced" Flexbox features
  • e.g. right now: Lite is missing "margins" and "padding". These are not part of the Flexbox spec, but they are one of the biggest single timesavers I've found when developing UI in Unity. I added them to Flexbox Pro because I thought they would make life easier for all of us - I underestimated how much of a HUGE difference they make, and I currently use them all the time on all my projects.
  • e.g. right now: Lite is missing the CSS "min size" and "max size" and "default size" constraints. Flexbox doesn't require these - but they are extremely powerful when you want to make pixel-perfect layouts, when you want to fine-control the sizes of specific icons or buttons (even across mutliple screen sizes) etc.
    
  • e.g. with the flexwrap algorithm that a few people are betatesting right now ... that won't be included in the Lite version. If you actually need flexwrap then you're serious enough about game dev that you should be using the full version.
  • e.g. in future, performance updates probably won't be included in the Lite version - it's already very fast. Usually: faster than Unity's built-in UI! (but the full version is going to get even faster this year)

The only downside to using the Lite version is that when you upgrade to the full version you'll have to re-attach the scripts to each GameObject, and reconfigure each one (this is due to the design of the UnityEditor, and how it creates builds) -- I've spoken to some other asset publishers about how to workaround that (i.e. make it so upgrading becomes automatic), and it's doable, but it's a few days of extra work for me. At some point I'll do that, because I don't like how annoying it is. But it might not be until e.g. next year.

TL;DR: The Lite version will always get fewer updates, fewer features, and be less fun to use. But it should always give a "flavour" of the real thing. Use it as a zero-cost demo. Or ... use it as a way to get something for free (but at the current price, I'd say it's a no-brainer to upgrade if you find it useful).

 

Incidentally ... the main thing holdind up the next release is some nasty interaction between "flex wrap" (wrapping UI automatically, flowing child items so that they fill up one line then wrap to the next) ... and Unity's own Scrollviews.

The two *can* work together, but making it easy to use and automatic is proving difficult. I'm putting a lot of heuristics / intelligence into the layout algorithm. My ideal for the next release is that it automatically "does what you expect" when you try to wrap items around a scrollview, or try to scroll a container of wrapped items without you having to change any settings from the defaults.

(current users will have noticed that 90% of the time you don't have to change any settings at all - the layout algorithm intelligently figures out what you were trying to achieve with the UI. This is mostly because Flex itself is a great layout system, highly declarative, so I can usually infer what you were trying to do! But partly because I have a big chunk of code where I detect your current hierarchy and make intelligent guesses about sizes and resizing etc)

 

Thank you, that's all valuable information!

While you're at it: Since this library is meant to be as true to CSS Flex Box as possible, can you recommend any good Flex Box tutorials? Ideally, they'd focus on sizing elements properly. I like Flexbox Defense and Flexbox Froggy, but they only deal with positioning elements.

 

Personally I learnt by experimenting . If there are specific things you want tutorials on - especially more advanced layouts/setups - let me know, and if I've got a good answer for it I'll post it as a new tutorial on http://flexbox4unity.com . I'd quite like to build up a library of flexbox tutorials there.

 

I just dug up this CSS Flex Box playground from my bookmarks. Might be helpful in learning this particular library; I'll try it out and let you know how it goes.

 

New video showing some of the UI you can build quickly with the next version.

 

New getting-started / tutorial for absolute beginners (no prior experience of CSS/Flexbox required): http://flexbox4unity.com/2020/06/05/guide-using-flexbox-in-unity-2020/

 

Experimenting with a new live debug view with more options than the current one:

 

Version 3 now live in the asset store.

Some highlights:

• New layout algorithm with flex-wrap included, lots of small fixes, and more accurate in complex cases
• Better auto-detection of when UnityEditor has resized the UI, with auto-relayout
  
• New API calls for rapidly creating a Flexbox UI from script
  
• Improved "justify/align" code (fixed some uncommon bugs)
• Added/fixed: overflow handling, especially for scrollable areas with auto-scroll
• Added: unit-tests you can run yourself to check what's fixed in latest versions
• Fixed: default widths and heights were sometimes ignored when using justify = stretch
• + a lot more small fixes and improvements

 

Responsive Design now works, using the flex-wrap features in the latest build:

 

Is this plugin compatible with TextMesh Pro?

 

Yes - there are no known TMP-related bugs in Flexbox, but there are bugs in TMP itself that make it harder to work with. I try to create workarounds for each of those as people report them.

(e.g. next version (not published yet) has some performance improvements specifically for TMP, to workaround TMP generating a lot of garbage unnecessarily, and burning a lot of CPU time. Normal UnityUI.Text doesn't have these problems)

 

Hi, this seems really cool and I've been playing with the Lite version - I'm trying to make a table with resizable columns, essentially it consists of a row container with panels (with FlexItem components) arranged as column-divider-column-divider-column etc.

I set the Basis=Length and a size in each column and a fixed length for the dividers. This works great in the editor and resizes properly. I've then attached a script to the divider which has references to the left and right columns (and uses draggable, which works fine). From there I want to set the Basis length (and also swap between Length and Auto) in the script so it can be resized at runtime. However I can't find the FlexItem property that needs to be set for this. I haven't seen any script side documentation so maybe I've missed something?

Now - I imagine the answer is to have the full version source code, however before I buy I just wanted to check that this WILL be possible when I have the code to look through and find what to set?

Many thanks.

 

If I understand correctly, you want this?



The LITE version is a bit behind the full version, but that property should be there.

If/when you switch to the full version, which has a more aggressive / intelligent auto-detection system for relayout, you might find that what you're doing is bypassing auto-detection of "layout changed, relayout needed".

If so (but test it first - if it's not needed, it's not needed), you'll want to additionally call (every time you change these values through script):

Code (CSharp):

1. FlexItem.RelayoutAfterCreatingAtRuntime()

...but I believe that method didn't exist when I last published the LITE version.

 

NB: to keep the code clean and workaround the fact that Unity and CSS both require the same variables with different meanings, I have named:

• all Flexbox mandated variables "variableName" - unless it has a conflict with Unity libs, in which case "flexVariableName" - except for flexBasis, where I had a conflict with some other code (it should be "basis" - I can't remember which library/framework was using basis to mean something else, and I will probably move this back to "basis" in a future version because it's cleaner)
• all CSS mandated variables "cssVariableName" - e.g. cssMinWidth, cssMargins, cssPadding
• all Unity mandated variables "(whatever unity requries, because we cannot change this)" - e.g. minWidth, preferredWidth, etc

It's annoying that flexBasis is the only one that's wrong at the moment, sorry about that!

 

Ah, no, I see! I think you're asking "how do I set the actual pixels/percent part of a basis?"

In which case:



Mode can be:



...and the value is your px/percent/whatever value. For mode AUTO or mode CONTENT then the "value" is ignored.

 

PS: @jamiec7919 I'm in the discord channel most days, probably easier/quicker to sort this out there. - https://discord.gg/4AkrDgu

 

Yep that is it exactly and looks like that method is exactly what I need. Doesn't appear to be available in the Lite version though. That's no problem, I understand the free version is behind at least I know it will be possible if I buy the full version. Thanks for your help, I'll play some more!

EDIT: Actually sorry! Missed that it isn't a method but a constructor. It still doesn't work (flexBasis=new FlexboxBasis(xPos,FlexBasis.Length) but I wonder if that refresh/recalc is what is needed.

 

Yep, so ... automatically refreshing layout doesn't fully work even in Unity's own code . I'm confident we'll get there eventually, but I'm working with a lot of undocumented Unity features so there's a lot of iteration before we catch every edge-case.

Until then ... I have created explicit methods in the current main version that lets you precisely control re-layout (you can layout just the current item, or its children, or both it AND its children, or it AND its parents, etc).

In the LITE version you can still force a relayout, off the top of my head you want to do:

Code (CSharp):

1. FlexContainer container = ... // parent container
2. var settings = Flexbox4UnityProjectSettings.shared;
3. settings.layoutAlgorithm.ReLayout( container, RefreshLayoutMode.
4. FORCE_RECURSE_UP_THEN_SELF_DOWN
5. );

(I believe those are the correct method names, but essentially: get a reference to the current global layout algorithm (which is stored in the global Flexbxo4UnityProjectSettings singleton) ... then call layoutAlgorithm.ReLayout with those args)

 

...although in your case you should be able to save some CPU time by doing:

SELF_AND_DESCENDENTS_ONLY

instead of

FORCE_RECURSE_UP_THEN_SELF_DOWN

(as you can guess: the first option only does this container and its children; the second option does the whole UI (which usually isn't needed).

 

Thanks for that, doesn't look like 'shared' is public in Flebox4UnityProjectSettings so haven't been able to test this, however I did get it working by resizing the container panel (add and remove a pixel in the same update, might be doing relayout twice but that's ok for now). That's sufficient for my prototype so I can see how it would work even without the convenience relayout (and it does work well!).

 

I need some volunteers to try the next version of Flexbox4Unity - I have multiple automated-upgrade scripts and I need to make sure they work correctly on a variety of projects. I also want to make sure the new splash-screen doesn't recreate the bugs the old one had. Please let me know ASAP if you'd be OK with me sending you the pre-release version and trying it a couple of times on your project!

 

PROBLEM INSTALLING!

I just bought Flexbox 4, downloaded, and imported. Now I'm getting errors about the import. It doesn't appear in my packages, and yet Unity claims that it's there. I have shut down and re-opened and I'm having the same problem.

Here are my error messages:

[PackageManagerUI] Error while getting product update details: Failed to parse response: Code 299 "Aborted Request"
UnityEditor.AsyncHTTPClientone(State, Int32)

[PackageManager] Error Failed to parse response: Code 299 "Aborted Request"
UnityEditor.AsyncHTTPClientone(State, Int32)

Then after I shut down and re-opened, these are my error messages:

[PackageManagerUI] Error while getting product update details: User is not logged in or user status invalid.
UnityEditor.EditorApplication:Internal_CallDelayFunctions()

[PackageManager] Error User not logged in
UnityEditor.EditorApplication:Internal_CallDelayFunctions()

[PackageManagerUI] Error while getting product update details: Failed to parse response.
UnityEditor.AsyncHTTPClientone(State, Int32)

(BTW, I am logged in)

 

That appears to be a problem with Unity itself - Flexbox doesn't use the PackageManager at all.

What version of Unity are you using? If you're using one of the alpha versions (e.g. 2020.2) it's likely that your copy of Unity has a new bug. If you're using the current main official Unity (2019.4.x) then it should be working fine.

Edited to add: probably best to email me (support at snapandplug.com) so we can cover the details directly, or alternatively: I'll be on the discord channel in about 6 hours time, and most of tomorrow.

 

I just purchased Flexbox 4 Unity but there are installation errors when I import the package on Unity 202.1.10f1. I also tried with an empty project.

Here are the errors:

Assets\Flexbox4Unity\Local SOURCE\Editor\F4UUpgrader3xTo320ChangeSettingsFiles.cs(107,42): error CS0246: The type or namespace name 'WorkaroundUnityUnsafePrefabEditing' could not be found (are you missing a using directive or an assembly reference?)

Assets\Flexbox4Unity\Local SOURCE\Editor\F4UUpgrader.cs(244,44): error CS0246: The type or namespace name 'WorkaroundUnityUnsafePrefabEditing' could not be found (are you missing a using directive or an assembly reference?)

Assets\Flexbox4Unity\Local SOURCE\Editor\F4UUpgrader.cs(255,27): error CS1579: foreach statement cannot operate on variables of type '?' because '?' does not contain a public instance definition for 'GetEnumerator'

Assets\Flexbox4Unity\Local SOURCE\Editor\F4UUpgrader.cs(257,27): error CS1579: foreach statement cannot operate on variables of type '?' because '?' does not contain a public instance definition for 'GetEnumerator'

 

That's a new class from the latest version - maybe it somehow got missed-out of the assembly-definition? (i.e. it's there, but Unity's compiler is refusing to access it). I'm checking now, seeing if I can figure out what's wrong (and why did it work fine on my machine when I checked before uploading to asset store??)

 

Unfortunately Unity 2020.1 uses the stupid broken Unity Package Manager (Grr!) and in trying to reproduc your bug I'm being blokced the other (known) bug in 2020.1 that Unity blocks itself internally -- I can't actually download the asset.

NB: Unity 2019.x is working fine - Unity 2020.1 isn't even supported by Unity themselves, it's really very buggy .

I'm trying to find the workaround for this bug now (I know it's caused problems for other asset publishers), but this means I probably won't be able to get you an answer today, sorry.

 

OK - in 2019 I can see the problem: that class is missing an implementation for 2020.1 (Unity changed the way prefabs are handled for 2020.x, and I need to write an adapter that uses the new implementation when needed).

Here is a *very* quick fix that might make it work fine for you:

1. Open the file "WorkaroundUnityUnsafePrefabEditing.cs"
2. At the top of the file, change the line: "#if UNITY_2020_1_OR_NEWER" to be: "#if FALSE"

This will continue using the pre-2020.x implementation of the class which should work fine in 2020 also (but is untested)

I will put out a proper fix ASAP but it could take a few days - sorry!

 

Thanks. That worked for me.