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> 又在主应用程序中。

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

    }

自定义CSS：

HBox

嗯，你看到我给了画布背景，有点透明。

但是当时有一个HBox，宽度为150px，里面有两个图像，每个图像都是40x40，所以在这种情况下HBox将是150x40，这对我来说很好我试图做。

但两张图片是并排的，我希望左图像对齐text-align左侧，右图像对齐右侧。

我已经尝试{{1}}，但没有，我的猜测是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>

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 Horizo​​ntalAlign =“left”等

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

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