6

我尝试使用 Flex 样式，但遇到了对齐问题。

HBox我在 a和HBoxa内部有两个图像组件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 {

    }

正如你所见，我给画布添加了背景和一点透明度。

但是然后有一个HBox150px 宽度的，里面有两个图像，每个图像都是 40x40，所以在这种情况下，这HBox将是 150x40，这对于我想要做的事情来说很好。

但是两个图像是并排的，我希望左侧图像与左侧对齐，HBox右侧图像与右侧对齐。

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

那么我该怎么做呢？

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

4

2 回答 2

9

间隔标签在此类情况下很有用。如果在两个图像之间插入一个，则可以将它们推到 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>
于 2009-11-12T20:11:33.093 回答
3

你可以试试这些网站

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% 宽度，并将它们分开对齐。

于 2009-11-12T19:33:41.640 回答