Flex HBox alignment

Question

I experimenting with Flex Styling, and I came across an alignment issue.

I have two image components inside an HBox, and the HBox inside a Canvas, which in turn is inside the main Application.

<mx:Canvas id="Navigation"
    horizontalCenter="0"
    bottom="0"
    left="0"
    right="0"
    visible="true"
    height="40"
    styleName="transparent">

    <mx:HBox 
        styleName="ControlContainer"
        horizontalCenter="0"
        width="150">

        <mx:Image id="left"
            source="@Embed(source='left.png')"
            left="0"/>

        <mx:Image id="right"
            source="@Embed(source='right.png')"
            right="0"/>
    </mx:HBox>
</mx:Canvas>

Custom CSS:

    .transparent {
        backgroundAlpha: 0.7;
        background-color: white;
    }
    .ControlContainer {

    }

Well as you see I gave the Canvas with background, and a bit transparency.

But the then there is an HBox, with 150px width, and two images inside it, each image is 40x40, so in this case the HBox would be 150x40 which is nice for what I'm trying to do.

But both images are side by side, and i want the left image aligned to the left side of the HBox, and the right image to the right side.

I've tried text-align but nothing, my guess is that Flex CSS doesn't behave the same way as CSS focused to HTML.

So how can i do that?

PS: If someone knows some good websites about Flex Styling, Flex CSS or Flex customization, would be great if you leave me a few links in comment.

Answer 1

Spacer tags are useful in situations like these. If you insert one in-between the two images, you can push them to edges of the HBox. While setting the spacer's width to 100% would seem to indicate that it's going to take up the entire box, this won't be the case as the images' widths will be set to an absolute value as soon as their content has loaded. The spacer will then take up 100% of the remaining width.

    <mx:HBox 
            styleName="ControlContainer"
            horizontalCenter="0"
            width="150">

            <mx:Image id="left"
                    source="@Embed(source='left.png')"
                    left="0"/>

            <mx:Spacer width="100%"/>

            <mx:Image id="right"
                    source="@Embed(source='right.png')"
                    right="0"/>
    </mx:HBox>