6

Flex Stylingを試しましたが、配置の問題が発生しました。

の中に2​​つの画像コンポーネントがあり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の幅のがあり、その中に2つの画像があり、各画像は40x40なので、この場合はHBox150x40になります。これは、私がやろうとしていることに適しています。

しかし、両方の画像が並んでいるので、左側の画像をの左側にHBox、右側の画像を右側に揃えたいと思います。

私は試しましtext-alignたが、何もしていません。FlexCSSはHTMLに焦点を合わせたCSSと同じようには動作しないと思います。

では、どうすればそれができますか？

PS：Flex Styling、Flex CSS、またはFlexのカスタマイズに関する優れたWebサイトを誰かが知っている場合は、コメントにいくつかのリンクを残していただければ幸いです。

4

2 に答える 2

9

スペーサータグは、このような状況で役立ちます。2つの画像の間に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>
于 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スタイリングの経験はあまりありません。通常はHBoxHorizo​​ntalAlign="left"などに伝えます。

同じHBox内で2つの異なる画像を2つの異なる方向に配置できるかどうかはわかりません

高さ100％、幅50％の2つのHboxをそれぞれ追加し、別々に配置することをお勧めします。

于 2009-11-12T19:33:41.640 に答える