设置Flex组件的尺寸大小

深红色部分标明了需注意的地方

另外要注意组件和容器的生命周期，确保你设置width和height是正确的时候，否则你设置了可能不发挥作用，可参考文章:http://help.adobe.com/en_US/flex/using/WS460ee381960520ad-2811830c121e9107ecb-7fff.html
http://livedocs.adobe.com/flex/3/html/help.html?content=ascomponents_advanced_2.html


参考文档:http://livedocs.adobe.com/flex/3/html/help.html?content=size_position_3.html

Determining and controlling component sizes
Flex determines the sizes of controls and containers based on the components and their properties and how you can use Flex properties to control the sizes.


Note: For a summary of the basic rules for component sizing, see Basic layout rules and considerations.

Basic sizing property rules
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, you must set the percentHeight or percentWidth property.
■When you get the height and width properties, the value is always the actual height or width of the control.

Determining component size
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 Determining container size. 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 component size by using a percentage value and do not specify an explicit or percentage-based size for its container, the component size is the default size. Flex ignores the percentage specification. (Otherwise, an infinite recursion might result.)
如果你只是给children设置了百分比值，但是对应的容器没有显示设置pixel值或百分比值，那么children使用的是其默认值，因为百分比值无法计算。

■If a child or set of children require 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 so users can scroll to the clipped content. 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.
■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 laying out or displaying the component; it only prevents Flex from considering the component when it lays out other components. As a result, the next component or components in the display list overlap the component. To prevent Flex from displaying the component, also set the visible property to false.

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

■Flex determines all components' default dimensions during the measurement pass, and uses these values when it calculates container size during the layout pass.
■If you specify an explicit size for a container, Flex always uses that size, as with any component.
■If you specify a percentage-based size for a container, Flex determines the container's actual size as part of the parent container's sizing procedure, as with any component.
■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 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.
Each container has a set of rules that determines the container's default size. For information on default sizes of each control and container, see the specific container sections in the Adobe Flex Language Reference, and in Application Container; Using Layout Containers; and Using Navigator Containers.

深红色字体的部分需要特别注意，如果你没有给容器显示的设置pixel值或百分比的值，那么容器的宽度和高度是根据它的children的尺寸来计算的，如果某个child你显示的设置了值，就用该childe的显示值，否则就要child的默认值，而且在计算容器的尺寸时，是不考虑children的百分比设置值的，这些值对容器没有，只会用children的默认尺寸或显示的pixel值                                                                                                                                                                                                             

参考文档:http://livedocs.adobe.com/flex/3/html/help.html?content=size_position_2.html

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.