柔性HBox对准

Question

我试验了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 {

    }

就像你看到的，我给了画布背景，还有一点透明度。

但是有一个150 do宽的HBox，里面有两个图像，每个图像都是40x40，所以在这个例子中，HBox应该是150x40，这对我想要做的事情来说很不错。

但是这两个图像都是并排的，我希望左边的图像对齐到HBox**，的左边，右边的图像对齐到右边。**

我尝试过text-align，但什么也没有，我的猜测是Flex的行为方式与专注于HTML的CSS不同。

那我该怎么做呢？

PS:如果有人知道一些关于Flex样式、Flex CSS或Flex定制的好网站，如果你在评论中给我留了几个链接，那就太好了。

。

Answer 1

在这种情况下，间隔标签是有用的。如果在两个图像之间插入一个，则可以将它们推到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>

Answer 2

你可以试试这些网站

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

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

我没有多少使用Flex的CSS样式的经验，我通常只告诉HBox HorizontalAlign=“左”等等。

我不确定您是否能够在同一个HBox中对齐两个不同方向的不同图像

我建议添加两个Hbox，它们都是100%的高度和50%的宽度，并将它们分开对齐。