A Tile layout container lays out its children in one or more vertical columns or horizontal rows, starting new rows or columns as necessary. The direction property determines the layout. The valid values for the direction property are vertical for a column layout and horizontal (default) for a row layout.

All Tile container cells have the same size, unlike the cells of a Grid layout container (see Grid layout container). Flex arranges the cells of a Tile container in a square grid, where each cell holds a single child component. For example, if you define 16 children in a Tile layout container, Flex lays it out four cells wide and four cells high. If you define 13 children, Flex still lays it out four cells wide and four cells high, but leaves the last three cells in the fourth row empty.

The following image shows examples of horizontal and vertical Tile containers:

For complete reference information, see Tile in the Adobe Flex Language Reference.

Creating a Tile layout container

You define a Tile container in MXML by using the <mx:Tile> tag. Specify an id value if you intend to refer to a component elsewhere in your MXML, either in another tag or in an ActionScript block. You can use the tileHeight and tileWidth properties to specify explicit tile dimensions.

The following example creates the horizontal Tile container shown in the image in Tile layout container. All cells have the height and width of the largest child, 50 pixels high and 100 pixels wide.

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

    <mx:Tile id="myFlow" 
        direction="horizontal" 
        borderStyle="solid"
        paddingTop="10" paddingBottom="10" 
        paddingRight="10" paddingLeft="10" 
        verticalGap="15" horizontalGap="10">
        
        <mx:TextInput id="text1" text="1" height="50" width="75"/>
        <mx:TextInput id="text2" text="2" height="50" width="100"/>
        <mx:TextInput id="text3" text="3" height="50" width="75"/>
        <mx:TextInput id="text4" text="4" height="50" width="75"/>
        <mx:TextInput id="text5" text="5" height="50" width="75"/>
    </mx:Tile>
</mx:Application>
The executing SWF file for the previous example is shown below:

Sizing and positioning a child in a Tile container

Flex sets the default size of each Tile cell to the height of the tallest child and the width of the widest child. All cells have the same default size. If the default size of a child is larger than the cell because, for example, you used the tileHeight and tileWidth properties to explicitly size the cells, Flex automatically sizes the child to fit inside the cell boundaries. This, in turn, may clip the content inside the control; for instance, the label of a button might be clipped even though the button itself fits into the cell. If you specify an explicit child dimension that is greater than the tileHeight or tileWidth property, Flex clips the child.

If the child's default width or default height is smaller than the cell, the default horizontal alignment of the child in the cell is left and the default vertical alignment is top. You can use the horizontalAlign and verticalAlign properties of the <mx:Tile> tag to control the positioning of the child.

If the child uses percentage-based sizing, the child is enlarged or shrunk to the specified percentage of the cell. In the example in Creating a Tile layout container, the TextInput control named text2 has a width of 100 pixels; therefore, the default width of all Tile cells is 100 pixels, so most children are smaller than the cell size. If you want all child controls to increase in size to the full width of the cells, set the width property of each child to 100%, as the following example shows. The example also shows how to use the Tile control's tileWidth property to specify the width of the tiles:

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

    <mx:Tile id="myFlow" 
        direction="horizontal" 
        borderStyle="solid" 
        paddingTop="10" paddingBottom="10" 
        paddingRight="10" paddingLeft="10" 
        verticalGap="15" horizontalGap="10" 
        tileWidth="100">
        
        <mx:TextInput id="fname" text="1" height="50" width="100%"/>
        <mx:TextInput id="lname" text="2" height="50" width="100%"/>
        <mx:TextInput id="addr1" text="3" height="50" width="100%"/>
        <mx:TextInput id="addr2" text="4" height="50" width="100%"/>
        <mx:TextInput id="addr3" text="5" height="50" width="100%"/>
    </mx:Tile>
</mx:Application>
The executing SWF file for the previous example is shown below: