Positioning and laying out Flex components

Adobe Flex 4 introduces the Spark component set, which includes Spark containers. Spark containers contain a <s:layout> property which specifies the layout scheme for the container. Spark containers support four layout schemes:

• BasicLayout (default): Use absolute positioning, or layout constraints.
• HorizontalLayout: Lay out children in a single horizontal row.
• VerticalLayout: Lay out children in a single vertical column.
• TileLayout: Lay out children in multiple rows and columns.

Note: Flex 4 also supports MX containers, which use a predefined set of rules to automatically position all child components that you define within them. For example, if you use a Canvas container, or an MX Application or Panel container, with the layout property set to "absolute", you can specify absolute positions for its children, or use constraint-based layout. For some MX containers, there is no Spark equivalent. For the differences between Spark containers and MX containers when positioning components, see About layout with Spark and MX containers in the Adobe Flex 4 Help.

The <s:Application> tag specifies an Application container. If you do not specify a layout for the Application container, Flex uses the Basic Layout, which is absolute positioning. The layout examples in this QuickStart specify VerticalLayout for the Application container.

This article provides examples on how to position your components in a Flex application:

• Using automatic positioning
• Using absolute positioning
• Using constraint-based layout

The Adobe Flash Builder 4 MXML editor provides visual layout controls to help position your Flex components.

Using automatic positioning

Specify HorizontalLayout, VerticalLayout, or TileLayout for automatic positioning of components in Spark containers. Setting the x or y property of their layout components directly or calling the move() method has no effect, or only a temporary effect.

You can control aspects of the layout by specifying layout properties. The following properties are the most common ones. For more information on layout properties, see About Spark layouts in the Adobe Flex 4 Help.

• paddingTop, paddingBottom, paddingLeft, paddingRight: Specifies the minimum number of pixels from the edge of a container and the edge of a layout element.
• horizontalAlign and verticalAlign: Specifies how to align the centers of layout elements within a container.
• gap: Specifies the distance in pixels between layout elements in a container.

This example specifies a VerticalLayout for the Panel containing the Button and Label components. The layout specifies padding and a gap for the layout elements. The layout also centers components in a vertical columnn.

Example

Result

Back to top

Using absolute positioning

Specify BasicLayout for absolute positioning of components in Spark containers. BasicLayout is the default layout scheme. If you do not specify a layout scheme, the container defaults to BasicLayout.

With absolute positioning, you specify the position of a component by using its x and y properties, or you specify a constraint-based layout; otherwise, Flex places the child at position 0,0 of the parent container. When you specify the x and y coordinates, Flex repositions the controls only when you change the property values.

This example uses the default BasicLayout scheme for the Panel container, which implements absolute positioning. Then, it sets the x and y properties for both the Label and Button controls so that the two controls overlap.

Example

Result

Back to top

Using constraint-based layout

You can manage child component size and position simultaneously by using a constraint-based layout, where you anchor the sides or center of a component to positions relative to the component's container. You can use constraint-based layouts with containers that use absolute positioning as a layout scheme. For Spark containers, the default BasicLayout scheme specifies absolute positioning.

You can use constraint-based layout to determine the position and size of the immediate children of any container that supports absolute positioning.

You specify the constraints by using the top, bottom, left, right, horizontalCenter, or verticalCenter style properties of the child component.

Anchoring the edges of a component

You can anchor one or more edges of a component at a pixel offset from the corresponding edge of its container. The anchored component edge stays at the same distance from the container edge when the container resizes.

The top, bottom, left, and right style properties specify the distances between the component sides and the corresponding container sides, in pixels.

The Button control in the following example has its bottom and right edges achored 10 pixels away from the edges of the Panel container that it is in.

Example

Result

Stretching a component

If you anchor both edges in a dimension, such as top and bottom, the component resizes if the container resizes. The Button control in the following example has all four of its edges anchored 10 pixels away from the edges of the Panel container that it is in.

Example

Result

Anchoring the center of a component

You can also anchor a component's horizontal or vertical center (or both) at a pixel offset from the center of the container. The component does not resize in the specified dimension unless you also use percentage-based sizing.

The horizontalCenter and verticalCenter styles specify distance between the component's center point and the container's center, in the specified direction; a negative number moves the component left or up from the center.

The horizontalCenter and verticalCenter styles specify the offset from the center of a container, in pixels, that a control should be placed at. The Button control in the following example has both styles set to 0 (zero) to perfectly center it in the Panel container.

Example

Result

A more complicated example

This following example uses contraint-based layout to center the Label control and to make the Button control stretch to almost the full length of the Panel. Set the top property of the Label control to 10 to constrain it to appear 10 pixels from to the top of the Panel. Set its horizontalCenter property to 10 to perfectly center it in the Panel.

Set the left and right properties on the Button control to 10 to make it stretch to within 10 pixels of either side of the Panel. Set its bottom property to 10 to constrain its bottom edge to 10 pixels from the lower edge of the Panel.

The following diagram demonstrates the effects of the properties you set visually. The visual layout controls are part of the Design View in Flash Builder.

A size determined by constraint-based layout overrides any explicit or percentage-based size specifications. If you specify left and right style properties, for example, the resulting constraint-based width overrides any width set by a width or percentWidth property.

Example

Result

Back to top

For more information

• Laying out components
• Using constraints-based layouts
• The Layout Cookbook

Back to top