By default, Flex updates the layout of a container's children when a new child is added to it, when a child is removed from it, when a child is resized, and when a child is moved. Because the Move effect modifies a child's position, and the Zoom effect modifies a child's size and position, they both cause the container to update its layout.

However, when the container updates its layout, it can actually reverse the results of the effect. For example, you use the Move effect to reposition a container child. At some time later, you change the size of another container child, which forces the container to update its layout. This layout update can cause the child that moved to be returned to its original position.

To prevent Flex from performing layout updates, you can set the autoLayout property of a container to false. Its default value is true, which configures Flex so that it always updates layouts. You always set the autoLayout property on the parent container of the component that uses the effect. For example, if you want to control the layout of a child of a Grid container, you set the autoLayout property for the parent GridItem container of the child, not for the Grid container.

You set the autoLayout property to false when you use a Move effect in parallel with a Resize or Zoom effect. You must do this because the Resize or Zoom effect can cause an update to the container's layout, which can return the child to its original location.

When you use the Zoom effect on its own, you can set the autoLayout property to false, or you may leave it with its default value of true. For example, if you use a Zoom effect with the autoLayout property set to true, as the child grows or shrinks, Flex automatically updates the layout of the container to reposition its children based on the new size of the child. If you use a Zoom effect with the autoLayout property set to false, the child resizes around its center point, and the remaining children do not change position.

The HBox container in the following example uses the default vertical alignment of top and the default horizontal alignment of left. If you apply a Zoom effect to the image, the HBox container resizes to hold the image, and the image remains aligned with the upper-left corner of the container:

<mx:HBox>
    <mx:Image source="myImage.jpg"/>
</mx:HBox>

In the next example, the image is centered in the HBox container. If you apply a Zoom effect to the image, as it resizes, it remains centered in the HBox container.

<mx:HBox horizontalAlign="center" verticalAlign="middle">
    <mx:Image source="myImage.jpg"/>
</mx:HBox>

By default, the size of the HBox container is big enough to hold the image at it original size. If you disable layout updates, and use the Zoom effect to enlarge the image, or use the Move effect to reposition the image, the image might extend past the boundaries of the HBox container, as the following example shows:

<mx:HBox autoLayout="false">
    <mx:Image source="myImage.jpg"/>
</mx:HBox>

You set the autoLayout property to false, so the HBox container does not resize as the image resizes. If the image grows to a size so that it extends beyond the boundaries of the HBox container, the container adds scroll bars and clips the image at its boundaries.

To prevent the scroll bars from appearing, you can use the height and width properties to explicitly size the HBox container so that it is large enough to hold the modified image. Alternatively, you can set the clipContent property of the container to false so that the image can extend past its boundaries.