Box レイアウトコンテナでは、子が単一の垂直列または水平行にレイアウトされます。Box コンテナの direction プロパティを使用し、垂直（デフォルト）レイアウトか水平レイアウトかを指定します。HBox および VBox コンテナは、horizontal および vertical direction プロパティ値を持つ Box コンテナです。

次の例は、水平レイアウトの Box コンテナおよび垂直レイアウトの Box コンテナを示しています。

詳細については、『Adobe Flex リファレンスガイド』を参照してください。

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>
前の例で実行する SWF ファイルは以下のとおりです。

次のコード例は前の例とほぼ同じですが、<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>
前の例で実行する SWF ファイルは以下のとおりです。