FlexBuilder is a complete implementation of HTML/CSS's Flexbox standard, ported to Unity3D and C#.
Main website: http://flexbuilder.ninja
Installing / Upgrading
For minor upgrades I include scripts to auto-upgrade as much as I can. The self-fixing system will take care of the rest.
For major upgrades - especially from v3 (Flexbox4Unity) to v4 (FlexBuilder) - make sure your read the Upgrading guides.
If you get stuck, try the Discord link above - get help from other users, and you can report bugs directly.
If you’re a Web Developer, experienced with CSS3, then check the CSS Guide to Flexbox to see what's the same and what's different.
If you’ve never used Flexbox before, start with the Flexbox Primer.
There are two quick-start guides, one for building a layout via point-and-click in the Editor, the other for building a layout via script/C#. This document contains a shortened version nof the Editor/GUI guide - the full guide is here: QuickStart: build a Layout.
Once you understand CSS/Flexbox, you use four concepts in FlexBuilder to create your Flexbox layouts:
- 1 x RootFlexContainer
- UnityUI elements
To see how the different parts work together, read Guide: Anatomy of a Layout
We'll go through the following steps:
- Add a RootFlexContainer to your project (and a Canvas if you didn't already have one)
- Create your main FlexContainer inside the RootFlexContainer
- Add more FlexItems and FlexContainers inside your main FlexContainer to create your layout
- Configure your FlexContainers
- Add Buttons, Text, Images, etc to your FlexItems
It is strongly recommended that you run through the QuickStart: build a Layout instead
💡 If you have FlexBuilder-Pro, or the FlexBuilder-Templates add-on, then you can use Templates directly inside the UnityEditor to rapidly build a complex Flexbox UI via point-and-click. See Templates for more info.
1st layout: Add a RootFlexContainer and FlexContainer
To create a RootFlexContainer you can right-click your Canvas (or any RectTransform) and add it from the context menu
Then select it and click the "Add FlexContainer" button in RootFlexContainer's inspector.
1st layout: Add child FlexItems and FlexContainers
Each FlexContainer has a pair of buttons for adding child FlexItems, or child FlexContainers:
1st layout: Configure your FlexContainers
The controls for layout inside a FlexContainer have many options, following the Flexbox specification. Each button has a tooltip to confirm which Flexbox attribute it represents. If you're not sure what they mean, see the Flexbox Primer
💡 For full details of Layouts in FlexBuilder, see Guide: Layouts