Getting Started

FlexBuilder is a complete implementation of HTML/CSS's Flexbox standard, ported to Unity3D and C#.

Main website: http://flexbuilder.ninja

Community/support: https://discord.gg/4AkrDgu

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.

First steps

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.

Super-quick start

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
  • FlexContainers
  • FlexItems
  • UnityUI elements
Note

To see how the different parts work together, read Guide: Anatomy of a Layout

Building Layouts

We'll go through the following steps:

  1. Add a RootFlexContainer to your project (and a Canvas if you didn't already have one)
  2. Create your main FlexContainer inside the RootFlexContainer
  3. Add more FlexItems and FlexContainers inside your main FlexContainer to create your layout
  4. Configure your FlexContainers
  5. Add Buttons, Text, Images, etc to your FlexItems
Tip

It is strongly recommended that you run through the QuickStart: build a Layout instead

Note

💡 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

Note

💡 For full details of Layouts in FlexBuilder, see Guide: Layouts