About sizing and positioning
Flex controls the layout of components by using a set of rules. The layout rules are a combination of sizing rules for individual components, and sizing and positioning rules for containers. Flex supports automatic layout, so you often do not have to initially set the size or position of components. Instead, you can concentrate on building the logic of your application and let Flex control the layout. Later, you can adjust the dimensions of instances, if necessary.
Each container has its own rules for controlling layout. For example, the VBox container lays out its children in a single column. A Grid container lays out its children in rows and columns of cells. The Application container has 24-pixel padding, and many other containers have 0-pixel padding.
Although Flex has built-in default layout rules, you can use the component's properties and methods to customize the layout. All components have several properties, including height and width, for specifying the component's size in absolute or container-relative terms. Each container also has properties and styles that you can use to configure aspects of layout. You can use settings such as the verticalGap and horizontalGap styles of a Tile container to set the spacing between children, and the direction property to specify a row or column layout. You can also use different positioning techniques for laying out components in a container; some containers, for example, support absolute x- and y-coordinate-based positioning.
About layout in Flex
The Layout Manager controls layout in Flex. The manager uses the following three-stage process to determine the size and position of each component in an application:
Stage 1 - Commitment pass
Determines the property settings of the application's components. This phase allows components whose contents depend on property settings to configure themselves before Flex determines their sizes and positions.
During the commitment pass, the Layout Manager causes each component to run its commitProperties() method, which determines the property values.
Stage 2 - Measurement pass
Calculates the default size of every component in the application. This pass starts from the most deeply nested components and works out toward the Application container. The measurement pass determines the measured, or default, size of each component. The default size of each container is based on the default or explicit (if specified) sizes of its children. For example, the Box container's default width is equal to the sum of the default or explicit widths of all of its children, plus the thickness of the borders, plus the padding, plus the gaps between the children.
During the measurement pass, the Layout Manager causes each component to run its measureSizes() method (a private method that calls the measure() method) to determine the component's default size.
Stage 3 - Layout pass
Lays out your application, including moving and resizing any components. This pass starts from the outermost container and works in toward the innermost component. The layout pass determines the actual size and placement of each component. It also does any programmatic drawing, such as calls to the lineTo() or drawRect() methods.
During the layout pass, Flex determines whether any component's sizing properties specify dimensions that are a percentage of the parent, and uses the setting to determine the child component's actual size. The Layout Manager causes each component to run its updateDisplayList() method to lay out the component's children; for this reason, this pass is also referred to as the update pass.
About Flex frames of reference
Flex uses several frames of reference in determining positions and sizes:
- The local area and local coordinate system are relative to the outer edges of the component. The component's visual elements, such as borders and scroll bars, are included in the local coordinates.
- The viewable area is the region of a component that is inside the component's visual elements; that is, it is the part of the component that is being displayed and can contain child controls, text, images, or other contents. Flex does not have a separate coordinate system for this area.
- The content area and content coordinate system include all of the component's contents, and do not include the visual elements. They include any regions that are currently clipped from view and must be accessed by scrolling the component. The content area of a scrolling TextArea control, for example, includes the region of text that is currently scrolled off the screen.
Flex uses the viewable area when it determines percentage-based sizes and when it performs constraint-based layout.
Flex component x and y properties, which you use to specify absolute positioning, are in the content coordinate system.
For more information on Flex coordinate systems, see Using Flex coordinates.
About component sizing
The measurement and layout passes determine a component's height and width. You can get these dimensions by using the height and width properties; you can use these properties and others to control the component's size.
Flex provides several ways for you to control the size of controls and containers:
Default sizing
Automatically determines the sizes of controls and containers.
Explicit sizing
You set the height and width properties to absolute values.
Percentage-based sizing
You specify the component size as a percentage of its container size.
Constraint-based layout
You control size and position by anchoring component's sides to locations in their container.
For details on controlling component sizes, see Sizing components.
About component positioning
Flex positions components when your application initializes. Flex also performs a layout pass and positions or repositions components when the application or a user does something that could affect the sizes or positions of visual elements, such as the following situations:
- The application changes properties that specify sizing, such as x, y, width, height, scaleX, and scaleY.
- A change affects the calculated width or height of a component, such as when the label text for a Button control changes, or the user resizes a component.
- A child is added or removed from a container, a child is resized, or a child is moved. For example, if your application can change the size of a component, Flex updates the layout of the container to reposition its children, based on the new size of the child.
- A property or style that requires measurement and drawing, such as horizontalScrollPolicy or fontFamily, changes.
There are very few situations where an application programmer must force the layout of a component; for more information, see Manually forcing layout.
Flex provides two mechanisms for positioning and laying out controls:
Automatic positioning
Flex automatically positions a container's children according to a set of container- and component-specific rules. Most containers, such as Box, Grid, or Form, use automatic positioning. Automatic positioning is sometimes referred to as automatic layout.
Absolute positioning
You specify each child's x and y properties, or use a constraint-based layout that specifies the distance between one or more of the container's sides and the child's sides, baseline, or center. Absolute positioning is sometimes referred to as absolute layout.
Three containers support absolute positioning:
- The Application and Panel containers use automatic positioning by default, and absolute positioning if you specify the layout property as "absolute".
- The Canvas container always uses absolute positioning.
For details on controlling the positions of controls, see Positioning and laying out controls.
Component layout patterns
Flex uses different patterns to lay out different containers and their children. These patterns generally fit in the type categories listed in the following table. The table describes the general layout behavior for each type, how the default size of the container is determined, and how Flex sizes percentage-based children.
|
Container type |
Default layout behavior |
|---|---|
|
Absolute positioning: Canvas, container or Application or Panel container with layout="absolute" |
General layout: Children of the container do not interact. That is, children can overlap and the position of one child does not affect the position of any other child. You specify the child positions explicitly or use constraints to anchor the sides, baselines, or centers of the children relative to the parent container. Default sizing: The measurement pass finds the child with the lowest bottom edge and the child with the rightmost edge, and uses these values to determine the container size. Percentage-based children: Sizing uses different rules depending on whether you use constraint-based layout or x- and y- coordinate positioning. See Sizing percentage-based children of a container with absolute positioning. |
|
Controls that arrange all children linearly, such as Box, HBox, VBox |
General layout: All children of the container are arranged in a single row or column. Each child's height and width can differ from all other children's heights or widths. Default sizing: The container fits the default or explicit sizes of all children and all gaps, borders, and padding. Percentage based children: If children with percentage-based sizing request more than the available space, the actual sizes are set to fit in the space, proportionate to the requested percentages. |
|
Grid |
General layout: The container is effectively a VBox control with rows of HBox child controls, where all items are constrained to align with each other. The heights of all the cells in a single row are the same, but each row can have a different height. The widths of all cells in a single column are the same, but each column can have a different width. You can define a different number of cells for each row or each column of the Grid container, and individual cells can span columns or rows. Default sizing: The grid fits the individual rows and children at their default sizes. Percentage-based children: If children use percentage-based sizing, the sizing rules fit the children GridItem components within their rows, and GridRow components within the grid size according to linear container sizing rules. |
|
Tile |
General layout: The container is a grid of equal-sized cells. The cells can be in row-first or column-first order. If you do not specify explicit or percentage-based dimensions, the control has as close as possible to an equal number of rows and columns, with the direction property determining the orientation with the larger number of items, if necessary. Default sizing: If you do not specify tileWidth and tileHeight properties, the container uses the measured or explicit size of the largest child cell for the size of each child cell. Percentage based children: The percentage-based sizes of a child component specify a percentage of the individual cell, not of the Tile container. |
|
Navigators: ViewStack, Accordion, TabNavigator |
General layout: The container displays one child at a time. Default sizing: The container size is determined by the measured or explicit dimensions of the initially selected child, and thereafter, all children are forced to be that initial size. If you set the resizeToChild property to true the container resizes to accommodate the measured or explicit size of each child, as that child appears. Percentage based children: As a general rule, you either use 100% for both height and width, which causes the children to fill the navigator bounds, or do not use percentage-based sizing. |
Basic layout rules and considerations
Flex performs layout according to the following basic rules. If you remember these rules, you should be able to easily understand the details of Flex layout. These rules should help you determine why Flex lays out your application as it does and to determine how to modify your application appearance.
For a detailed description of how Flex sizes components, see Determining and controlling component sizes. For detailed information on component positioning, see Positioning and laying out controls.
- Flex first determines all components' measured (default) or explicitly set sizes up, from the innermost child controls to the outermost (Application) control. This is done in the measurement pass.
- After the measurement pass, Flex determines all percentage-based sizes and lays out components down, from the outermost container to the innermost controls. This is done in the layout pass.
- Sizes that you set to a pixel value are mandatory and fixed, and override any maximum or minimum size specifications that you set for the component.
- The default sizes determined in the measurement pass specify the sizes of components that do not have explicit or percentage-based sizes (or use constraint-based layout), and are fixed.
- Percentage-based size specifications are advisory. The layout algorithms satisfy the request if possible, and use the percentage values to determine proportional sizes, but the actual sizes can be less than the requested sizes. Percentage-based sizes are always within the component's maximum and minimum sizes, and, subject to those bounds, don't cause a container's children to exceed the container size.
Manually forcing layout
Sometimes, you must programmatically cause Flex to lay out components again. Flex normally delays processing properties that require substantial computation until the script that causes them to be set finishes executing. For example, setting the width property is delayed, because it may require recalculating the widths of the object's children or its parent. Delaying processing prevents it from being repeated multiple times if the script sets the object's width property more than once. However, in some situations, you might have to force the layout before the script completes.
Situations where you must force a layout include the following circumstances:
- When printing multiple page data grids by using the PrintDataGrid class.
- Before playing an effect, if the start values have just been set on the target.
- When capturing bitmap data after making property changes.
To force a layout, call the validateNow() method of the component that needs to be laid out. This method causes Flex to validate and update the properties, sizes, and layout of the object and all its children, and to redraw them, if necessary. Because this method is computation-intensive, you should be careful to call it only when it is necessary.
For an example of using the validateNow() method, see Updating the PrintDataGrid layout.