Intro for Unity3D Users

FlexBuilder provides an (almost) exact and complete implementation of the Flexbox standard, as defined in CSS-3 and used all over the web - but adapted for Unity3D to make it integrate seamlessly and in a way that is fully compatible with all current and legacy UnityUI.

You should find it easy to use and jump into: everything is designed from a 'Unity first' standard, so that you should feel immediately at home. It helps to have a basic understanding of the UnityUI core elements - Button, Text, InputField, etc - and for advanced cases you may want to use RectTransform a little but it is completely unnecessary for most cases.

Note

💡 If you're already familiar with CSS/Flexbox, it's recommended you instead start with the Intro for CSS developers.

Key features:

  • Fully integrated with UnityUI (no incompatibilities, seamless)
  • High-performance (faster than default Unity in most all cases)
  • Vastly simplified controls (more powerful than Unity's, but easier to use)
  • 1:1 correspondence with modern CSS/3

It's recommended that you do the following:

  1. Read the Flexbox Primer below
  2. Follow one of the three QuickStart tutorials to create your first UI
  3. Experiment with the FlexContainer and FlexItem settings
  4. Read about the other Core Features and read the Guides on this site (see sidebar)

Flexbox Primer

You can read any tutorial on the web to learn about Flexbox. Some that we've found particularly easy to read / useful include:

Note

🚧 Coming Soon: an embedded guide/tutorial on CSS's version of Flexbox (until then -- use the first link above)

Next Step: QuickStart

Now that you have an understanding of CSS/Flexbox, it's time to build your own Flexbox UI. You can do this either in the UnityEditor, using the custom GUI for rapidly building a layout and seeing it in realtime ... or you can do it in script, using C# to build up the UI programmatically: