[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:

  • 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
  • Cleaned-up a lot of 1+ years old code when making the new modular algorithm system
  • ...and converted nearly all the semi-standard class-names and property names to the official CSS3 names
1 Like

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:

1 Like

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 :))

1 Like

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):

https://www.youtube.com/watch?v=cLlMAM_KYWA

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 Like

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-

5738380--602671--multislider.png
[ 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.)

1 Like

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.

1 Like

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!)

1 Like

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.