Flex 2 Developer's Guide > Building User Interfaces for
Flex Applications > Using Layout Containers > Box, HBox, and VBox layout containers

Box, HBox, and VBox layout containers

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.

NOTE

To lay out children in multiple rows or columns, use a Tile or Grid container. For more information, see Tile layout container and Grid layout container.

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

Horizontal and vertical Box containers

A Box container has the following default sizing characteristics:

Property	Default value
Default size	Vertical Box The height is large enough to hold all its children at the default or explicit height of the children, plus any vertical gap between the children, plus the top and bottom padding of the container. The width is the default or explicit width of the widest child, plus the left and right padding of the container. Horizontal Box The height is the default or explicit height of the tallest child, plus the top and bottom padding for the container. The width is large enough to hold all of its children at the default width of the children, plus any horizontal gap between the children, plus the left and right padding of the container.
Default padding	0 pixels for the `top`, `bottom`, `left`, and `right` values.

Property

Default value

Default size

Vertical Box The height is large enough to hold all its children at the default or explicit height of the children, plus any vertical gap between the children, plus the top and bottom padding of the container.

The width is the default or explicit width of the widest child, plus the left and right padding of the container.

Horizontal Box The height is the default or explicit height of the tallest child, plus the top and bottom padding for the container.

The width is large enough to hold all of its children at the default width of the children, plus any horizontal gap between the children, plus the left and right padding of the container.

Default padding

0 pixels for the top, bottom, left, and right values.

For complete reference information, see Box, HBox, and VBox in Adobe Flex 2 Language Reference.

Subtopics

Creating a Box, HBox, or VBox container

Flex 2.01