Intro for CSS-3 / Web Developers
FlexBuilder follows the CSS Specification fairly closely. CSS normally executes inside a Browser Window, whereas Unity code executes in a variety of places, so there's some small changes to accomodate that. There are also some larger changes to make sure UI controls and layout are "Unity compatible", This page highlights some key differences, and some less obvious features.
After reading these, it's recommended to try either
Workflow
In CSS you typically think about everything in terms of DIVs. Technically the CSS Specification expects you to think about "FlexContainers" which are - usually - DIVs, but could have been any HTML element. In FlexBuilder you have to explicitly create / attach FlexContainers to every object that you want to act as containers/divs.
CSS also uses either the Viewport, or the HTML tag, as a central place for setting some values that are then referenced throughout (eg window width) and for values you want to be inherited throughout the document. FlexBuilder's equivalent is the RootFlexContainer - technically it's a standard FlexContainer (exactly as per CSS3), but it has extra features for controlling viewport-related behaviours (especially: interfacing between the CSS areas of the screen and the non-CSS areas surrounding them).
Creating a UI with FlexBuilder typically progresses similarly to CSS. Where in CSS you start from a common HTML + HEAD + BODY set of tags, and then fill in your DIVs, in FlexBuilder you start from a common RootFlexContainer + one FlexContainer, and then you add your FlexContainers/FlexItems to the first FlexContainer.
Where’s my DIV?
If you want to create a DIV, in Unity you need to:
- Create a GameObject
- Attach a FlexItem (if you want it to be embedded in other DIVs/FlexContainers)
- Attach a FlexContainer (if you want it to contain other DIVs/FlexItems)
Significant differences
Inheritance
FlexBuilder currently (version 4.x) does not support any inheritance of values from parent objects. This feature is rarely used in game/application layouts and is generally not relevant to a Flexbox style layout.