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.

score 9 · Accepted Answer · answered Nov 12 '09 at 20:11

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>

This is by far the easiest MXML way to do this. Otherwise, turf the HBox and layout the canvas manually in AS3. — Glenn, Nov 12 '09 at 20:23
Thanks. I was just posting the solution in the moment you post your answer. And yes a simple spacer would do the trick. — Fábio Antunes, Nov 12 '09 at 20:28

score 3 · Answer 2 · answered Nov 12 '09 at 19:33

3

You can try these websites

http://www.adobe.com/devnet/flex/quickstart/styling_components/

http://www.loscavio.com/downloads/blog/flex3_css_list/flex3_css_list.htm

I have not had much experience with CSS Styling in Flex i would usually just tell the HBox HorizontalAlign="left" etc

I am not sure you will be able to align two different images in two different directions inside the same HBox

I would recommend adding two Hbox's both 100% height and 50% width each and align them separate.

answered Nov 12 '09 at 19:33

medoix

1,189
2
16
36

The first link i already knew, the second didn't and its VERY useful. But about the Hbox's problem.. 100% 50% would do but. The right image wouldn't still be aligned to the right. – Fábio Antunes Nov 12 '09 at 20:15
The solution is simple... I only had to add this between each image component. – Fábio Antunes Nov 12 '09 at 20:22
Ups. I also forgot to say. Thanks for your help. – Fábio Antunes Nov 12 '09 at 20:22
haha that is a very simple solutions and i am a bit embarrassed i didn't think of it! good work and you are welcome :) – medoix Nov 12 '09 at 20:26
The point of the HBox is that it ignores your position styles. Either use a Canvas and specify left|right or x|y, or use a mx:Spacer with 100% width between the two images. – Glenn Nov 12 '09 at 20:26

Flex HBox alignment

2 Answers2