Alignment & Spacing

Alignment

You can align children elements in a flex-box-styled way using the built-in align property.

UIAlign

PBUIAlign_Start        // start of layout axis (similar to CSS flex-start)
PBUIAlign_End          // end of layout axis (similar to CSS flex-end)
PBUIAlign_Center       // center of layout axis (similar to CSS center)
PBUIAlign_Stretch      // stretch all children (similar to CSS stretch)
PBUIAlign_SpaceBetween // space children flush to the edges (similar to CSS space-between)
PBUIAlign_SpaceAround  // space children with 1/2 spacing on the start and end (similar to CSS space-around)
PBUIAlign_SpaceEvenly  // space children evenly everwhere (similar to CSS space-evenly)

Here is a visual of each one:

The alignment works the same on both axes and direction sets the primary direction for all children.

UIAxis_X
UIAxis_Y

The default alignment is UIAxis_X. The following snippet changes the children direction:

parent->style.direction = UIAxis_Y;

Which would render as:

Spacing

You can space the children with the optional childSpace property. This is equivalent to adding a non-shrinkable box in between each child.

parent->style.childSpace = 10;

This would produce something like:

Example

UIBox* Box(PBColor backgroundColor) {
    UIBox* box = UIBoxMakeFromString(UIBoxFlag_DrawBackground, PBStrLit("Box"));
    box->style.width = UI_px(20);
    box->style.height = UI_px(20);
    box->style.backgroundColor = backgroundColor;
    return box;
}

void Render() {
    UIBox* parent = UIBoxMakeFromString(0, PBStrLit("parent"));
    parent->style.align.x   = align;
    parent->style.direction = UIAxis_X;
    parent->style.childSpace = 10;
    parent->style.width = UI_child_size(1);
    parent->style.height = UI_child_size(1);

    UIPushParent(parent);
    {
        Box(UI_rgb(1, 0, 0));
        Box(UI_rgb(0, 1, 0));
        Box(UI_rgb(0, 0, 1));
    }
    UIPopParent(parent);
}