Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/25/changing-a-tile-containers-child-layout-direction/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        Tile {
            paddingLeft: 10;
            paddingRight: 10;
            paddingTop: 10;
            paddingBottom: 10;
        }
    </mx:Style>

    <mx:ApplicationControlBar dock="true">
        <mx:Label text="direction:" />
        <mx:ComboBox id="comboBox">
            <mx:dataProvider>
                <mx:String>{mx.containers.TileDirection.HORIZONTAL}</mx:String>
                <mx:String>{mx.containers.TileDirection.VERTICAL}</mx:String>
            </mx:dataProvider>
        </mx:ComboBox>

        <mx:Spacer width="50%" />

        <mx:Label text="tileWidth ({tileW.value}):" />
        <mx:HSlider id="tileW"
                minimum="30"
                maximum="90"
                value="30"
                liveDragging="true"
                snapInterval="5"
                tickInterval="10"
                dataTipPrecision="0" />

        <mx:Spacer width="50%" />

        <mx:Label text="tileHeight ({tileH.value}):" />
        <mx:HSlider id="tileH"
                minimum="30"
                maximum="60"
                value="30"
                liveDragging="true"
                snapInterval="5"
                tickInterval="10"
                dataTipPrecision="0" />
    </mx:ApplicationControlBar>

    <mx:Tile backgroundColor="haloSilver"
            direction="{comboBox.selectedItem}"
            tileWidth="{tileW.value}"
            tileHeight="{tileH.value}">
        <mx:Button label="1" width="100%" height="100%" />
        <mx:Button label="2" width="100%" height="100%" />
        <mx:Button label="3" width="100%" height="100%" />
        <mx:Button label="4" width="100%" height="100%" />
        <mx:Button label="5" width="100%" height="100%" />
        <mx:Button label="6" width="100%" height="100%" />
        <mx:Button label="7" width="100%" height="100%" />
    </mx:Tile>

</mx:Application>

View source is enabled in the following example.

When the Tile container’s direction property is set to “horizontal” (or TileDirection.HORIZONTAL) you can see that the children are laid out left to right then top to bottom, like:

[1][2][3]
[4][5][6]
[7]

But if you change the direction property to “vertical” (or TileDirection.VERTICAL) you can see that the children are laid out top to bottom then left to right, like:

[1][4][7]
[2][5]
[3][6]

Happy Flexing!