Sizing visual components

The Flex sizing and layout mechanisms provide several ways for you to control the size of visual components:

Default sizing

Automatically determines the sizes of controls and containers. To use default sizing, you do not specify the component's dimensions or layout constraints.

Explicit sizing

You set the height and width properties to pixel values. When you do this, you set the component dimension to absolute sizes, and Flex does not override these values. The following <mx:Application> tag, for example, sets explicit Application dimensions:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    height="300" 
    width="600">

Percentage-based sizing

You specify the component size as a percentage of its container size. To do this, you specify the percentHeight and percentWidth properties, or, in an MXML tag, set the height and width properties to percentage values such as 100%. The following code, for example, sets percentage-based dimensions for an HBox container:

<mx:HBox id="hBox1" xmlns:mx="http://www.adobe.com/2006/mxml" 
    height="30%" width="90%"/>

The following ActionScript line resets the HBox width to a different percentage value:

hBox1.percentWidth=40;

Constraint-based layout

You can control size and position by anchoring components sides, centers, or baselines to locations in their container by specifying the top, bottom, left, right, baseline, horizontalCenter, and verticalCenter styles. You can use constraint-based layout only for the children of a container that uses absolute layout; the Application and Panel containers can optionally use this layout, and the Canvas container always uses it. The following example uses constraint-based layout to position an HBox horizontally, and explicit sizing and positioning to determine the vertical width and position:

<mx:HBox id="hBox2" xmlns:mx="http://www.adobe.com/2006/mxml" 
    left="30"right="30" 
    y="150" 
    height="100"/>

You can mix sizing techniques; however, you must ensure that the mix is appropriate. Do not specify more than one type of sizing for a component dimension; for example, do not specify a height and a percentHeight for a component. Also, ensure that the resulting sizes are appropriate; for example, if you do not want scroll bars or clipped components, ensure that the sizes of a container's children do not exceed the container size.

For detailed information on how Flex sizes components, and how you can specify sizing, see Sizing and Positioning Components.

Examples of component sizing

The following example shows sizing within an explicitly sized container when some of the container's child controls are specified with explicit widths and some with percentage-based widths. It shows the flexibility and the complexities involved in determining component sizes. The application logs the component sizes to flashlog.txt, so you can confirm the sizing behavior.

<?xml version="1.0"?>
<!-- components\CompSizing.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    creationComplete="logSizes();">

    <mx:Script>
        <![CDATA[
            private function logSizes():void {
                trace("HBox: "+ hb1.width);
                trace("Label: "+ lb1.width);
                trace("Image: "+ img1.width);
                trace("Button: "+ b1.width);
            }
        ]]>
    </mx:Script>

    <mx:HBox id="hb1" width="250">
        <mx:Label id="lb1" 
            text="Hello" 
            width="50"/>
        <mx:Image id="img1" 
            source="@Embed(source='assets/flexlogo.jpg')" 
            width="75%"/>
        <mx:Button id="b1" 
            label="Button" 
            width="25%"/>
    </mx:HBox>
</mx:Application>
The executing SWF file for the previous example is shown below:

The application consists of a 250-pixel-wide HBox container that contains a 50-pixel-wide label, an image that requests 75% of the container width, and a button that requests 25% of the container width. The component sizes are determined as follows:

Flex reserves 50 pixels for the explicitly sized Label control.
Flex puts an 8-pixel gap between components by default, so it reserves 16 pixels for the gaps; this leaves 184 pixels available for the two percentage-based components.
The minimum width of the Button component, if you do not specify an explicit width, fits the label text plus padding around it. In this case, the minimum size is 65 pixels. This value is larger than 25% of the component, so Flex does not use the percentage request, and reserves 65 pixels for the Button control.
The percentage-based image requests 75% of 250 pixels, or 187 pixels, but the available space is only 119 pixels, which it takes.

If you change the button and image size properties to 50%, the minimum button size is smaller than the requested size, so the percentage-sized controls each get 50% of the available space, or 92 pixels.

The following example uses explicit sizing for the Image control and default sizing for the Button control, and yields the same results as the initial example:

<?xml version="1.0"?>
<!-- components\CompSizingExplicit.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    creationComplete="logSizes();">

    <mx:Script>
        <![CDATA[
            private function logSizes():void {
                trace("HBox: "+ hb1.width);
                trace("Label: "+ lb1.width);
                trace("Image: "+ img1.width);
                trace("Button: "+ b1.width);
            }
        ]]>
    </mx:Script>

    <mx:HBox id="hb1" width="250">
        <mx:Label id="lb1" 
            text="Hello" 
            width="50"/>
        <mx:Image id="img1" 
            source="@Embed(source='assets/flexlogo.jpg')" 
            width="119" />
        <mx:Button id="b1" 
            label="Button"/>
    </mx:HBox>
</mx:Application>
The executing SWF file for the previous example is shown below:

Percentage-based sizing removes the need to explicitly consider the gaps and margins of a container in sizing calculations, but its greatest benefit applies when containers resize. Then, the percentage-based children resize automatically based on the available container size. In the following example, the series of controls on the left resize as you resize your browser, but the corresponding controls on the right remain a fixed size because their container is fixed. Click the first Button control to log the component sizes to flashlog.txt.

<?xml version="1.0"?>
<!-- components\CompSizingPercent.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[
            private function logSizes():void {
                trace("HBox: "+ hb1.width);
                trace("Label: "+ lb1.width);
                trace("Image: "+ img1.width);
                trace("Button: "+ b1.width);
            }
        ]]>
    </mx:Script>

    <mx:HBox width="100%">
        <mx:HBox id="hb1" width="40%" borderStyle="solid">
            <mx:Label id="lb1"
                text="Hello" 
                width="50"/>
            <mx:Image id="img1" 
                source="@Embed(source='assets/flexlogo.jpg')" 
                width="60%"/>
            <mx:Button id="b1" 
                label="Button" 
                width="40%"
                click="logSizes();"/>
        </mx:HBox>
        
        <mx:HBox width="260" borderStyle="solid">
            <mx:Label 
                text="Hello" 
                width="50"/>
            <mx:Image 
                source="@Embed(source='assets/flexlogo.jpg')" 
                width="119" />
            <mx:Button 
                label="Button"/>
        </mx:HBox>
    </mx:HBox>
</mx:Application>
The executing SWF file for the previous example is shown below:

For more information about sizing considerations, see Sizing components.

Adobe Flex 3 Help

Sizing visual components