The Box layout container lays out its children in a single vertical column or a single horizontal row. You use the direction property of a Box container to determine either vertical (default) or horizontal layout. The HBox and VBox containers are Box containers with horizontal and vertical direction property values.

The following example shows one Box container with a horizontal layout and one with a vertical layout:

For complete reference information, see the Adobe Flex Language Reference.

Creating a Box, HBox, or VBox container

You use the <mx:Box>, <mx:VBox>, and <mx:HBox> tags to define Box containers. Use the VBox (vertical box) and HBox (horizontal box) containers as shortcuts so you do not have to specify the direction property in the Box container. Specify an id value if you intend to refer to a component elsewhere in your MXML, either in another tag or in an ActionScript block.

The following example creates a Box container with a vertical layout:

<?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:ArrayCollection>
                 <mx:String>ComboBox 1</mx:String>
              </mx:ArrayCollection>         
        </mx:ComboBox>
    </mx:Box>
</mx:Application>
The executing SWF file for the previous example is shown below:

The following code example is equivalent to the previous example, except that this example defines a vertical Box container by using the <mx:VBox> tag:

<?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:ArrayCollection>
                 <mx:String>ComboBox 1</mx:String>
              </mx:ArrayCollection>         
        </mx:ComboBox>
    </mx:VBox>
</mx:Application>
The executing SWF file for the previous example is shown below: