FlexLayouts

A Flex 4 layout describes how visual components are to be arranged inside a container. Flex 4 ships with four basic layouts for your pleasure: BasicLayout, HorizontalLayout, VerticalLayout, and TileLayout. We’ll cover each layout in more detail below, and even include some handy PDF cheat sheets when we’re done.

The basic layouts themselves are straightforward and really not that interesting as far as layouts go. But we’ll review them in detail none the less, because they can also server as potential extension points for building your own custom layouts. And remember, it’s all about custom components, layouts are just an implementation speed bump to get you there.

Usage

Applying a layout to a container is trivial, which is, of course, the power behind layouts. The simplicity is not just a boon to the average developer slinging code, but it also makes layout libraries like the FlexLayouts library (download now) possible and incredibly powerful.

Applying a layout in MXML:

<s:Group>
    ...
    <s:layout>
        <s:HorizontalLayout gap="10" />
    </s:layout>
</s:Group>

Applying a layout in ActionScript:

var h:HorizontalLayout = new HorizontalLayout();
h.gap = 10;
 
var g:Group = new Group();
g.layout = horiz;

BasicLayout

This isn’t so much a layout, as it is the absence of any layout. BasicLayout is purely a positional layout. Each visual component in the container must be positioned manually, either by setting its raw x,y coordinates or by setting its bounds (left, right, top, bottom). BasicLayout is also the default layout of almost all spark containers, most importantly Group and Application.

HorizontalLayout

HorizontalLayout arranges the visual children of a container in a single horizontal row, flowing left to right. This layout is very common, and thus the Flex 4 SDK includes the HGroup convenience container, which is just a Group container with the HorizontalLayout applied by default.

VerticalLayout

VerticalLayout arranges the visual children of a container in a single vertical column, flowing top to bottom. As above, this layout is very common, and thus the Flex 4 SDK includes the VGroup convenience container, which is just a Group container with the VerticalLayout applied by default.

TileLayout

TileLayout arranges the visual children of a container in a grid. All grid cells are identical even if the children vary in size. The grid cells are sized to accommodate the biggest child elements. The flow of elements is controlled by the orientation attribute (see the TileLayout cheat sheet), and can be either left to right, then top to bottom, or top to bottom, then left to right. This layout is really all that common in our experience, but for symmetry reasons the Flex 4 SDK includes the TileGroup convenience container, which is just a Group container with the TileLayout applied by default.

Cheat Sheets

• HorizontalLayout (PDF, 257k)
• VerticalLayout (PDF, 258k)
• TileLayout (PDF, 253k)