Flex HBox对齐

Question

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

我有一个内部的两个图像组件HBox,而HBox内部的一个Canvas,它们又在主应用程序内部.

<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背景,有点透明.

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

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

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

那我该怎么做呢？

PS:如果有人知道一些关于Flex样式,Flex CSS或Flex定制的好网站,如果你留下评论中的一些链接会很棒.

Answer 1

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>