Evenly space children of Group

Question

With this simple example of 3 buttons, how can I have the buttons spaced evenly.

<s:HGroup width="100%">
    <s:Button label="button 1" />
    <s:Button label="button 2" />
    <s:Button label="button 3" />
</s:HGroup>

It currently appears as:

I would like it something like:

Answer 1

Put spacer elements between the Buttons and set their widths to 100% so that they take up all the available space.

You can use the old mx Spacer for the job:

<s:HGroup width="100%">
    <s:Button label="button 1" />
    <mx:Spacer width="100%"/>
    <s:Button label="button 2" />
    <mx:Spacer width="100%"/>
    <s:Button label="button 3" />
</s:HGroup>

but if you'd like to avoid mx classes then use the most lightweight Spark class that implements IVisualElement. To my knowledge that would be GraphicElement.

<s:HGroup width="100%">
    <s:Button label="button 1" />
    <s:GraphicElement width="100%"/>
    <s:Button label="button 2" />
    <s:GraphicElement width="100%"/>
    <s:Button label="button 3" />
</s:HGroup>

Spacer extends UIComponent and as such it is heavier than GraphicElement.