Flex 2 開発ガイド > Flex アプリケーションのユーザーインターフェイスの作成 > レイアウトコンテナの使用 > Box、HBox、および VBox レイアウトコンテナ > Box、HBox、または VBox コンテナの作成

Box、HBox、または VBox コンテナの作成

Box コンテナを定義するには、<mx:Box>、<mx:VBox>、および <mx:HBox> タグを使用します。VBox (垂直ボックス) および HBox (水平ボックス) コンテナをショートカットとして使用するので、Box コンテナ内で direction プロパティを指定する必要はありません。MXML の他の場所 (別のタグまたは ActionScript ブロック) のコンポーネントを参照する場合は、id 値を指定します。

次の例では、Box コンテナを垂直レイアウトで作成します。

<?xml version="1.0"?>
<!-- containers\layouts\BoxSimple.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Box direction="vertical" 
        borderStyle="solid" 
        paddingTop="10" 
        paddingBottom="10" 
        paddingLeft="10" 
        paddingRight="10">

        <mx:Button id="fname" label="Button 1"/>
        <mx:Button id="lname" label="Button 2"/>
        <mx:Button id="addr1" label="Button 3"/>
        <mx:ComboBox id="state"/>
    </mx:Box>
</mx:Application>

次のコード例は前の例とほぼ同じですが、<mx:VBox> タグを使って垂直ボックスコンテナを定義している点で異なります。

<?xml version="1.0"?>
<!-- containers\layouts\VBoxSimple.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:VBox borderStyle="solid" 
        paddingTop="10"
        paddingBottom="10" 
        paddingLeft="10" 
        paddingRight="10">
        
        <mx:Button id="fname" label="Button 1"/>
        <mx:Button id="lname" label="Button 2"/>
        <mx:Button id="addr1" label="Button 3"/>
        <mx:ComboBox id="state"/>
    </mx:VBox>
</mx:Application>

Flex 2.01