Grid container with three rows and three columns : Container « Container « Flex

1. Flex
2. Container
3. Container

Grid container with three rows and three columns

           

<!--
Code from Flex 4 Documentation "Using Adobe Flex 4".

This user guide is licensed for use under the terms of the Creative Commons Attribution 
Non-Commercial 3.0 License. 

This License allows users to copy, distribute, and transmit the user guide for noncommercial 
purposes only so long as 
  (1) proper attribution to Adobe is given as the owner of the user guide; and 
  (2) any reuse or distribution of the user guide contains a notice that use of the user guide is governed by these terms. 
The best way to provide notice is to include the following link. 
To view a copy of this license, visit http://creativecommons.org/licenses/by-nc-sa/3.0/

-->


<!-- containers\layouts\GridSimple.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:mx="library://ns.adobe.com/flex/mx"
    xmlns:s="library://ns.adobe.com/flex/spark">
    <mx:Grid id="myGrid">
        <!-- Define Row 1. -->
        <mx:GridRow id="row1">
            <!-- Define the first cell of Row 1. -->
            <mx:GridItem>
                <mx:Button label="Button 1" />
            </mx:GridItem>
            <!-- Define the second cell of Row 1. -->
            <mx:GridItem>
                <mx:Button label="2" />
            </mx:GridItem>
            <!-- Define the third cell of Row 1. -->
            <mx:GridItem>
                <mx:Button label="Button 3" />
            </mx:GridItem>
        </mx:GridRow>
        <!-- Define Row 2. -->
        <mx:GridRow id="row2">
            <!-- Define a single cell to span three columns of Row 2. -->
            <mx:GridItem colSpan="3" horizontalAlign="center">
                <mx:Button label="Long-Named Button 4" />
            </mx:GridItem>
        </mx:GridRow>
        <!-- Define Row 3. -->
        <mx:GridRow id="row3">
            <!-- Define an empty first cell of Row 3. -->
            <mx:GridItem />
            <!-- Define a cell to span columns 2 and 3 of Row 3. -->
            <mx:GridItem colSpan="2" horizontalAlign="center">
                <mx:Button label="Button 5" />
            </mx:GridItem>
        </mx:GridRow>
    </mx:Grid>
</s:Application>

   
    
    
    
    
    
    
    
    
    
    
  

Related examples in the same category

1.	Show setting the sizes of a container and its child
2.	Show the percentage-based sizing behavior with absolute positioning
3.	Using Scroll bars
4.	Repositioning children at run time
5.	corresponding controls on the right remain a fixed size because their container is fixed.
6.	Adding and removing components relativeTo another control
7.	includeInLayout="false"
8.	Minimum and Maximum Sizes and percent
9.	Alignment to center
10.	Create constraints for the right edge and the bottom edge, using the properties right and bottom
11.	Building within the main container
12.	Change the layout attribute to vertical
13.	Constraint Sizing
14.	Padding Container
15.	includeInLayout and visible properties.
16.	Get the number of direct child components in a container
17.	Add multiple child components, or a container that contains multiple child components
18.	Scrolling Spark containers
19.	Set clipAndEnableScrolling property to true to clip the container's children to the container boundaries
20.	Creating and removing a child of a container
21.	Wrap the Spark container in an MX container on in a Spark Navigator
22.	Enable Scrolling in a Container
23.	Example: Determining a container and child sizes
24.	uses the layout property of the container to set its layout to the HorizontalLayout class:
25.	A NavigatorContent must be the child of an MX navigator container
26.	Use an inline item renderer with the SkinnableDataContainer container
27.	Use tag to define an inline item renderer for two containers
28.	Scale Children of a Container
29.	Creating a Box container with a vertical layout
30.	Container Inheritance
31.	Create a Button control and adds it to a container
32.	Add a graphic element to the container to define a background for the buttons
33.	size and position of each component is carefully calculated to ensure that none of the components overlap