Flex lays out components when your application initializes. Flex also performs a layout pass when the application or a user does something that affects the sizes or positions of visual elements, including the following:

• The application changes properties that specify sizing or positioning, such as x, y, width, height, scaleX, scaleY, rotationX, rotationY, and the transform matrix.

• 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 the fontFamily, changes.

Sometimes, you might have to programmatically cause Flex to update application layout. Situations where you must force a layout include the following:

• 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 to lay 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, be careful to call it only when it is necessary.

The following rules describe how you can use Flex sizing properties to specify the size of a component:

• Any dimension property that you set overrides the corresponding default value; for example, an explicitly set height property overrides any default height.

• Setting the width, height, maxWidth, maxHeight, minWidth, or minHeight property to a pixel value in MXML or ActionScript also sets the corresponding explicit property, such as explicitHeight or explicitMinHeight.

• The explicit height and width and the percentage-based height and width are mutually exclusive. Setting one value sets the other to NaN; for example, if you set height or explicitHeight to 50 and then set percentHeight to 33, the value of the explicitHeight property is NaN, not 50, and the height property returns a value that is determined by the percentHeight setting.

• If you set the height or width property to a percentage value in an MXML tag, you actually set the percentage-based value, that is, the percentHeight or percentWidth property, not the explicit value. In ActionScript, you cannot set the height or width property to a percentage value; instead, set the percentHeight or percentWidth property.

• When you read the height and width properties at run time, the value is always the actual height or width of the control.

During the measurement pass, Flex determines the components' default (also called measured) sizes. During the layout pass, Flex determines the actual sizes of the components, based on the explicit or default sizes and any percentage-based size specifications.

The following list describes sizing rules and behaviors that apply to all components, including both controls and containers. For container-specific sizing rules, see below. For detailed information on percentage-based sizing, see Using percentage-based sizing.

• If you specify an explicit size for any component (that is not outside the component's minimum or maximum bounds), Flex always uses that size.

• If you specify a percentage-based size for any component, Flex determines the component's actual size as part of the parent container's sizing procedure, based on the parent's size, the component's requested percentage, and the container-specific sizing and layout rules.

• The default and percentage-based sizes are always at least as large as any minimum size specifications.

• If you specify a child component size by using a percentage value and do not specify an explicit or percentage-based size for its container, the child component and the container use their default size.

• A child might require more space than is available in the parent container. The container can either let the component extend past its boundaries, or the container can clip the component to its boundaries.

  For Spark containers, the default is to let the child component extend past its boundaries. Set the clipAndEnableScrolling property to true to configure a parent to clip the child at the parent's boundaries. If you clip the children to the container boundaries, you can use the Scroller component with the container to display scroll bars. For more information, see Scrolling Spark containers.

  For a MX container, if a child requires more space than is available in the parent container, the parent clips the children at the parent's boundaries, and, by default, displays scroll bars on the container. Set the clipContent property to false to configure a parent to let the child extend past the parent's boundaries. Use the scrollPolicy property to control the display of the scroll bars. For more information, see Scrolling MX containers.

• If you specify a percentage-based size for a component, Flex uses the viewable area of the container in determining the sizes.

• When sizing and positioning components, Flex does not distinguish between visible and invisible components. By default, an invisible component is sized and positioned as if it were visible. To prevent Flex from considering an invisible component when it sizes and positions other components, set the component's includeInLayout property to false. This property affects the layout of the children of all containers except Accordion, FormItem, or ViewStack. For more information, see Preventing layout of hidden controls.

  Note: Setting a component's includeInLayout property to false does not prevent Flex from displaying the component; it only prevents Flex from considering the component when it lays out other components. To prevent Flex from displaying the component, also set the visible property to false.

Flex uses the following basic rules, in addition to the basic component sizing rules, to determine the size of a container:

• A percentage-based container size is advisory. Flex makes the container large enough to fit its children at their minimum sizes. For more information on percentage-based sizing, see Using percentage-based sizing.

• If you do not specify an explicit or percentage-based size for a container, Flex determines the container size by using explicit sizes that you specify for any of its children, and the default sizes for all other children.

• Flex does not consider any percentage-based settings of a container's children when sizing the container; instead, it uses the child's default size.

• If a MX container uses automatic scroll bars, Flex does not consider the size of the scroll bars when it determines the container's default size in its measurement pass. Thus, if a scroll bar is required, a default-sized container might be too small for proper appearance. For more information, see Scrolling MX containers.

  For a Spark container, the Scroller component adds the scroll bars and are therefore separate from the container.

Each MX container and each Spark layout class for a Spark container has a set of rules that determines the container's default size. For information on default sizes of each container and layout, see the specific container sections in the ActionScript 3.0 Reference for Apache Flex , and in Application containers; Spark containers; MX layout containers; and MX navigator containers.

The following example code shows how Flex determines the sizes of an SkinnableContainer container and its children. In this example, the SkinnableContainer uses a HorizontalLayout with three Button controls:

<?xml version="1.0"?> 
<!-- components\HBoxSizeSpark.mxml --> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark"> 
    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout> 
    
    <s:SkinnableContainer id="hb1"> 
        <s:layout> 
            <s:HorizontalLayout/> 
        </s:layout> 
        <s:Button id="b1" 
            label="Label 1"/> 
        <s:Button id="b2" 
            label="Label 2" 
            minWidth="80"/> 
        <s:Button id="b3" 
            label="Label 3"/> 
    </s:SkinnableContainer> 
    
    <s:Form> 
        <s:FormItem label="SkinnableContainer:"> 
            <s:Label text="{hb1.width}"/> 
        </s:FormItem> 
        <s:FormItem label="Button #1:"> 
            <s:Label text="{b1.width}"/> 
        </s:FormItem> 
        <s:FormItem label="Button #2:"> 
            <s:Label text="{b2.width}"/> 
        </s:FormItem> 
        <s:FormItem label="Button #3:"> 
            <s:Label text="{b3.width}"/> 
        </s:FormItem> 
    </s:Form> 
</s:Application>

By default, the SkinnableContainer with a HorizontalLayout uses a 6 pixel gap between children. Since the Application container specifies no sizing properties, the Application container sizes itself large enough to hold the SkinnableContainer container and the Form container.

The default width for buttons is based on the label text width; in this example it is 70 pixels for all three buttons. However, the second button sets its minWidth property to 80 pixels. Therefore, the SkinnableContainer width is 70 + 80 + 70 + 12 = 232 pixels.

If you change the minWidth property of the second button to 65 pixels, the calculation uses the button's minimum width, 70 pixels, so the SkinnableContainer width is 222 pixels.

In the following example, you explicitly set the width of the Application container to 600 pixels. The Application container defines no left or right padding so the content area of its children is the entire area of the Application container. The SkinnableContainer width is now 450 pixels, 75% of 600 pixels.

The button sizes are 92, 276, and 70 pixels, respectively. The third button uses the default size. The first and second buttons use 25% and 75% of the remaining available space in the container after deducting the default-width button and the gaps.

<?xml version="1.0"?> 
<!-- components\HBoxSizePercentSpark.mxml --> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    width="600"> 
    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout> 
    
    <s:SkinnableContainer id="hb1" width="75%"> 
        <s:layout> 
            <s:HorizontalLayout/> 
        </s:layout> 
        <s:Button id="b1" 
            label="Label 1" 
            width="25%"/> 
        <s:Button id="b2" 
            label="Label 2" 
            width="75%" 
            minWidth="80"/> 
        <s:Button id="b3" 
            label="Label 3"/> 
    </s:SkinnableContainer> 
    
    <s:Form> 
        <s:FormItem label="SkinnableContainer:"> 
            <s:Label text="{hb1.width}"/> 
        </s:FormItem> 
        <s:FormItem label="Button #1:"> 
            <s:Label text="{b1.width}"/> 
        </s:FormItem> 
        <s:FormItem label="Button #2:"> 
            <s:Label text="{b2.width}"/> 
        </s:FormItem> 
        <s:FormItem label="Button #3:"> 
            <s:Label text="{b3.width}"/> 
        </s:FormItem> 
    </s:Form> 
</s:Application>

If you set the SkinnableContainer width property to 20%, however, the SkinnableContainer width is not 120 pixels, 20% of the Application container width. This is because 120 pixels is too small to fit the container's children. Remember that percentage-based size specifications are advisory. The layout algorithms satisfy the request if possible, but the actual sizes can be different from the requested sizes.

Instead it is 183 pixels, the sum of 21 pixels for button 1 (the default minimum size), 80 pixels for button 2 (the specified minimum size), and 70 pixels (the specified minimum size) for button 2, 16 pixels for the gaps between buttons. The buttons are 21, 80, and 70 pixels wide, respectively.

For more information and examples showing sizing of containers and children, see Flex component sizing techniques. For detailed information on percentage-based sizing, see Using percentage-based sizing.

If you do not otherwise specify sizes, Flex calculates a size based on the default sizing characteristics of the particular component and the default or explicit sizes of the component's child controls.

As a rule, determine whether a component's default size (as listed for the component in the ActionScript 3.0 Reference for Apache Flex) is appropriate for your application. If it is, you do not have to specify an explicit or percentage-based size.

The following example shows how you can use default sizing for Button children of an BorderContainer container. In this example, none of the children of the container specify a width property:

<?xml version="1.0"?> 
<!-- components\DefaultButtonSizeSpark.mxml --> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:MyComps="myComponents.*"> 
 
    <s:BorderContainer width="400" height="25"> 
        <s:layout> 
            <s:HorizontalLayout/> 
        </s:layout> 
        <s:Button label="Label 1"/> 
        <s:Button label="Label 2"/> 
        <s:Button label="Label 3"/> 
    </s:BorderContainer> 
</s:Application>

Flex, therefore, uses the default sizes of the buttons, which accommodate the button label and default padding, and draws this application as the following image shows:

Notice the empty space to the right of the third button, because the sum of the default sizes is less than the available space.

Use the width and height properties of a component to explicitly set its size. In this example, Flex sets the component sizes to 300 by 40 pixels.

<?xml version="1.0"?> 
<!-- components\ExplicitTextSize.mxml --> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark"> 
 
    <s:Group> 
        <s:TextInput id="myInput" 
            text="This TextInput control is 200 by 40 pixels." 
            width="300" 
            height="40"/> 
    </s:Group> 
</s:Application>

The following example shows setting the sizes of a container and its child:

<?xml version="1.0"?> 
<!-- components\ExplicitHBoxSize.mxml --> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark"> 
 
    <s:Group width="150" height="50"> 
        <s:TextInput id="myInput" 
            text="Enter the zip code" 
            width="200" height="40"/> 
    </s:Group> 
</s:Application>

Because the specified TextInput control size is larger than that of its parent container, it extends beyond the boundaries of the container. If you set the clipAndEnableScrolling property of the container to true, the child is clipped at the container boundaries.

<?xml version="1.0"?> 
<!-- components\ExplicitHBoxSizeScroll.mxml --> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark"> 
 
    <s:Scroller> 
        <s:Group width="150" height="50"> 
            <s:TextInput id="myInput" 
                text="Enter the zip code" 
                width="200" height="40"/>            
        </s:Group> 
    </s:Scroller> 
</s:Application>

For more information on using scroll bars with Spark containers, see Scrolling Spark containers.

Note that for MX containers, the clipContent property of the container defaults to true. Therefore, MX containers clip the control at the container boundary and displays scroll bars. For more information on using scroll bars with MX containers, see Scrolling MX containers.

Percentage-based sizing dynamically determines and maintains a component's size relative to its container; for example, you can specify that the component's width is 75% of the container. This sizing technique has several advantages over default or explicit fixed sizing:

• You only have to specify a size relative to the container; you don't have to determine exact measurements.

• The component size changes dynamically when the container size changes.

• The sizing mechanism automatically takes into account the remaining available space and fits components even if their requested size exceeds the space.

To specify a percentage value, use one of the following coding techniques:

1. In an MXML tag, set the height or width property to a percentage value; for example:

    <s:TextArea id="ta1" width="70%" height="40%"/>

2. In an MXML tag or an ActionScript statement, set the percentHeight or percentWidth property to a numeric value; for example:

    ta1.percentWidth=70;

The exact techniques Flex uses to determine the dimensions of a component that uses percentage-based sizing depend on the type of container. For example, a MX Tile container, or a Spark container using the TileLayout class, has cells that are all the largest default or explicit dimensions of the largest child. Child control percentage values specify a percentage of the tile cell size, not of the container size. The percentage sizes of most other containers is relative to the overall container size.

When Flex sizes children of a container that uses automatic positioning to lay out children in a single direction, Flex does the following:

1. Determines the size of the viewable area of the parent container, and uses those dimensions for sizing calculations. The viewable area is the part of the container that is being displayed and can contain child components, text, images, or other content. For more information on calculating the size of containers, see Determining component size.

2. Determines the desired sizes of container children with percentage-based sizes as a percentage of the viewable area of the container, minus any padding and gaps between the children.

3. Reserves space for all children with explicit or default sizes.

4. If available space (parent container size minus all reserved space, including borders, padding, and gaps) cannot accommodate the percentage requests, divides the available space in proportion to the specified percentages.

5. If a minimum or maximum height or width specification conflicts with a calculated value, uses the minimum or maximum value, and recalculates all other percentage-based components based on the reduced available space.

6. Rounds the size down to the next integer.

The following examples show how the requested percentage can differ from the size when the component is laid out:

• Suppose that 50% of a SkinnableContainer is available after reserving space for all explicit-sized and default-sized children, and for all gaps and padding. If one component requests 20% of the parent, and another component requests 60%, the first component is sized to 12.5% (20 /(20+ 60) * 50%) of the parent container and the second component is sized to 37.5% of the parent container.

• If any component requests 100% of its parent application container's space, it occupies all the container except for the application's padding.

The following example specifies percentage-based sizes for the first two of three buttons in a BorderContainer container:

<?xml version="1.0"?> 
<!-- components\PercentHBoxChildren.mxml --> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark"> 
 
    <s:BorderContainer width="400" height="25"> 
        <s:layout> 
            <s:HorizontalLayout/> 
        </s:layout> 
        <s:Button id="b1" label="Label 1" width="25%"/> 
        <s:Button id="b2" label="Label 2" width="40%"/> 
        <s:Button id="b3" label="Label 3"/> 
    </s:BorderContainer> 
</s:Application>

In this example, the default width of the third button is 70 pixels. The BorderContainer container has no padding by default, but has a one-pixel wide border on both sides. Therefore, of the 400 pixel width, only 398 are available for laying out children. The HorizontalLayout class uses a 6-pixel horizontal gap between each component.

The first button requests 25% of the available 398 pixels of space, or 100 pixels (All calculated values are to the nearest pixel). The second button requests 40%, or 159 pixels. There is still unused space to the right of the third button.

Flex draws the following application:

Now change the percentage values requested to 50% and 40%, respectively:

<?xml version="1.0"?> 
<!-- components\PercentHBoxChildren5040.mxml --> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark"> 
 
    <s:BorderContainer width="400" height="25"> 
        <s:layout> 
            <s:HorizontalLayout/> 
        </s:layout> 
        <s:Button id="b1" label="Label 1" width="50%"/> 
        <s:Button id="b2" label="Label 2" width="40%"/> 
        <s:Button id="b3" label="Label 3"/> 
    </s:BorderContainer>    
</s:Application>

In this example, the first button requests 50% of the available space, or 200 pixels. The second button still requests 40%, or 160 pixels, for a total of 360 pixels. However, the BorderContainer container only has 318 pixels free after reserving 70 pixels for the default-width button, 2 pixels for the borders, and 12 pixels for the gaps between components.

Flex divides the available space proportionally between the two buttons, giving .5/(.5 + .4) * 318 = 176 pixels, to the first button and .4/(.5 + .4) * 318 = 140 pixels, to the second button.

Flex draws the following application:

Spark containers with a layout of BasicLayout, or MX Canvas, MX Panel, and MX Application containers can use absolute positioning. When Flex sizes children of a container that uses absolute positioning, it does the following:

1. Determines the viewable area of the parent container, and uses the corresponding dimensions as the container dimensions for sizing calculations. For more information on calculating the size of containers, see Determining component size.

2. Determines the sizes of children with percentage-based sizes by multiplying the decimal value by the container dimension minus the position of the control in the dimension's direction. For example, if you specify x="10" and width="100%" for a child, the child size extends only to the edge of the viewable area, not beyond.

   Note: The Spark BasicLayout class always calculates the percentage based on the size of the container, regardless of the position of the child component in the container.

   Because controls can overlay other controls or padding, the sizing calculations do not consider padding or any other children when determining the size of a child.

3. If a minimum or maximum height or width specification conflicts with a calculated value, uses the minimum or maximum value.

4. For MX containers, round the size down to the closest integer.

   For Spark containers, round the size up or down to the closest integer.

The following code shows the percentage-based sizing behavior with absolute positioning:

<?xml version="1.0"?> 
<!-- components\PercentSizeAbsPosit.mxml --> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark"> 
    <s:layout> 
        <s:VerticalLayout gap="25"/> 
    </s:layout> 
    <s:BorderContainer 
        width="200" height="75"> 
        <s:layout> 
            <s:BasicLayout/> 
        </s:layout> 
        <s:BorderContainer 
            x="20" y="10" 
            width="100%" height="25" 
            backgroundColor="#666666"/> 
    </s:BorderContainer> 
 
    <s:BorderContainer 
        width="200" height="75"> 
        <s:layout> 
            <s:BasicLayout/> 
        </s:layout> 
        <s:BorderContainer 
            left="20" top="10" 
            width="100%" height="25" 
            backgroundColor="#666666"/> 
    </s:BorderContainer> 
</s:Application>

Flex draws the following application:

You can also use the minWidth, minHeight, maxWidth, and maxHeight properties with a percentage-based component to constrain its size. Consider the following example:

<?xml version="1.0"?> 
<!-- components\PercentChildrenMin.mxml --> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark"> 
    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout> 
 
    <s:BorderContainer id="bc" width="400" height="25"> 
        <s:layout> 
            <s:HorizontalLayout/> 
        </s:layout> 
        <s:Button id="b1" label="Label 1" width="50%"/> 
        <s:Button id="b2" label="Label 2" width="40%" minWidth="150"/> 
        <s:Button id="b3" label="Label 3"/> 
    </s:BorderContainer> 
    
    <s:Form> 
        <s:FormItem label="Container:"> 
            <s:Label text="{bc.width}"/> 
        </s:FormItem> 
        <s:FormItem label="Button #1:"> 
            <s:Label text="{b1.width}"/> 
        </s:FormItem> 
        <s:FormItem label="Button #2:"> 
            <s:Label text="{b2.width}"/> 
        </s:FormItem> 
        <s:FormItem label="Button #3:"> 
            <s:Label text="{b3.width}"/> 
        </s:FormItem> 
    </s:Form>    
</s:Application>

To determine the widths of the percentage-based button sizes, Flex first determines the sizes as described in the second example in Example: Using percentage-based children, which results in requested values of 176 for the first button and 140 for the second button. However, the minimum width of the second button is 150, so Flex sets its size to 150 pixels, and reduces the size of the first button to occupy the remaining available space, which results in a width of 166 pixels.

Flex draws the following application:

By default, Flex lays out and reserves space for all components, including hidden components, but it does not display the hidden controls. A hidden component is one with its visible property set to false. You see blank spots where the hidden controls should appear when you make them visible. In place of the hidden controls, you see their container's background.

However, you can prevent Flex from considering the child component when it lays out the container's other children by setting the child component's includeInLayout property of the component to false.

When a component's includeInLayout property is false, Flex does not include it in the layout calculations for other components. In other words, Flex does not reserve space for the component, but still draws it. As a result, the component can appear underneath the components that follow it in the layout order. To prevent Flex from drawing the component, you must also set its visible property to false.

The following example shows the effects of the includeInLayout and visible properties. It lets you toggle each of these properties independently on the middle of three Panel controls in a SkinnableContainer:

<?xml version="1.0"?> 
<!-- components\HiddenBoxLayout.mxml --> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    height="500"> 
    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout> 
    
    <s:SkinnableContainer> 
        <s:layout> 
            <s:VerticalLayout/> 
        </s:layout> 
        <s:Panel id="p1" 
            title="Panel 1"/> 
        <s:Panel id="p2" 
            title="Panel 2"/> 
        <s:Panel id="p3" 
            title="Panel 3"/> 
    </s:SkinnableContainer> 
 
    <s:SkinnableContainer> 
        <s:layout> 
            <s:HorizontalLayout/> 
        </s:layout> 
        <s:Button label="Toggle Panel 2 Visible" 
            click="{p2.visible=!p2.visible;}"/> 
        <s:Button label="Toggle Panel 2 in Layout" 
            click="{p2.includeInLayout=!p2.includeInLayout;}"/> 
    </s:SkinnableContainer> 
</s:Application>

Run this application and click the buttons to see the results of different combinations of visible and includeInLayout properties. The example shows the following behaviors:

• If you include the second Panel container in the layout but make it invisible, Flex reserves space for it.

• If you exclude the second Panel container from the layout, the SkinnableContainer resizes and the third Panel container moves up. If you then include the second Panel container in the layout, the SkinnableContainer resizes again, and the third Panel container moves down.

• If you exclude the second Panel container from the layout but make it visible, Flex still draws it, but does not consider it in laying out the third Panel container, so the two panels overlap.

• If you specify a single edge constraint (left, right, top, or bottom) without any other sizing or positioning parameter, the component size is the default size and its position is determined by the constraint value. If you specify a size parameter (width or height), the size is determined by that parameter.

• If you specify a pair of constraints (left-right or top-bottom), the size and position of the component is determined by those constraint values. If you also specify a center constraint (horizontalCenter or verticalCenter), the size of the component is calculated from the edge constraints and its position is determined by the center constraint value.

• Component size determined by a pair of constraint-based layout properties (left-right or top-bottom) overrides any explicit or percentage-based size specifications. For example, if you specify both left and right constraints, the calculated constraint-based width overrides the width set by a width or percentWidth property.

• Edge constraints override baseline constraints.

The following example code shows how you can use constraint-based layout for a form. In this example, the Form control uses a constraint-based layout to position its top just inside the canvas padding. The form left and right edges are 20 pixels from the outer SkinnableContainer container's left and right edges. The second, inner, SkinnableContainer that contains the buttons uses a constraint-based layout to place itself 20 pixels from the right edge and 10 pixels from the bottom edge of the outer SkinnableContainer container.

If you change the size of your browser, stand-alone Flash Player, or AIR application, you can see the effects of dynamically resizing the application container on the Form layout. The form and the buttons overlap as the application grows smaller, for example.

<?xml version="1.0"?> 
<!-- components\ConstraintLayout.mxml --> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark"> 
    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout> 
 
    <s:SkinnableContainer width="100%" height="100%"> 
         <!-- Anchor the top of the form at the top of the canvas. 
            Anchor the form sides 20 pixels from the canvas sides. --> 
        <s:Form id="myForm" 
                backgroundColor="#DDDDDD" 
                top="0" 
                left="20" 
                right="20"> 
                
            <s:FormItem label="Product:" width="100%"> 
                <!-- Specify a fixed width to keep the ComboBox control from 
                    resizing as you change the application size. --> 
                <s:ComboBox width="200"/> 
            </s:FormItem> 
 
            <s:FormItem label="User" width="100%"> 
                <s:ComboBox width="200"/> 
            </s:FormItem> 
 
            <s:FormItem label="Date"> 
                <mx:DateField/> 
            </s:FormItem> 
 
            <s:FormItem width="100%" 
                    label="Hours:"> 
                <s:TextInput width="75"/> 
            </s:FormItem> 
 
            <s:FormItem width="100%" 
                    label="Minutes:"> 
                <s:TextInput width="75"/> 
            </s:FormItem> 
        </s:Form> 
 
        <!-- Anchor the box with the buttons 20 pixels from the canvas 
            right edge and 10 pixels from the bottom. --> 
        <s:SkinnableContainer id="okCancelBox" 
                right="20" 
                bottom="10"> 
            <s:layout> 
                <s:HorizontalLayout/> 
            </s:layout> 
            <s:Button label="OK"/> 
            <s:Button label="Cancel"/> 
        </s:SkinnableContainer> 
    </s:SkinnableContainer> 
</s:Application>