[FlexJS] Spacers and positioning

[Justin Mclean]

Hi,

An old trick to get things to be pined to the RHS was to use a 100% spacer in 
MXML.

However code like this doesn’t work in FlexJS:

<js:HContainer percentWidth="100">
    <js:Label text="Left" />
    <js:Spacer percentWidth="100" />
    <js:Label text="Right" />
</js:HContainer>

But in FlexJS the spacer is 100% of the containers width and the button wraps 
onto the next line.

You can do this but is seems bit cumbersome:

<js:HContainer percentWidth="100">
    <js:Label text="Left" />
    <js:Label text="Right" style="position:absolute;right:0px;" />
</js:HContainer>

And a little more cumbersome once you have several items you want to evenly 
space.

<js:initialView>
    <js:View percentWidth="100">
        <js:HContainer percentWidth="100">
            <js:Container percentWidth="25">
                <js:TextButton text="one" style="margin-left: auto; 
margin-right: auto;"/>
            </js:Container>
            <js:Container percentWidth="25">
                <js:TextButton text="two" style="margin-left: auto; 
margin-right: auto;"/>
            </js:Container>
            <js:Container percentWidth="25">
                <js:TextButton text="three" style="margin-left: auto; 
margin-right: auto;"/>
            </js:Container>
            <js:Container percentWidth="25">
                <js:TextButton text="four" style="margin-left: auto; 
margin-right: auto;"/>
            </js:Container>
        </js:HContainer>
    </js:View>
</js:initialView>

Is there a better way of doing this?

Thanks,
Justin