css – Flex HBox对齐

我尝试使用Flex样式,我遇到了对齐问题.

我在HBox中有两个图像组件,而在Canvas中有一个HBox,它又位于主应用程序中.

<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>

自定义CSS：

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

    }

好吧,你看到我给了Canvas背景,有点透明.

但是当时有一个宽度为150px的HBox,里面有两个图像,每个图像都是40×40,所以在这种情况下HBox将是150×40,这对我正在尝试做的很好.

但是两个图像是并排的,我希望左图像对齐到HBox的左侧,右图像对齐到右侧.

我尝试过text-align但是没有,我的猜测是Flex CSS的行为与CSS专注于HTML的行为不同.

那我该怎么做呢？

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.

解决方法

Spacer标签在这些情况下很有用.如果在两个图像之间插入一个图像,则可以将它们推到HBox的边缘.虽然将间隔物的宽度设置为100％似乎表明它将占据整个盒子,但情况并非如此,因为图像的宽度将在其内容加载后立即设置为绝对值.然后间隔物将占据剩余宽度的100％.

<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>