Package | mx.containers |
Class | public class Grid |
Inheritance | Grid ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() |
Language Version: | ActionScript 3.0 |
Product Version: | Flex 3 |
Runtime Versions: | Flash Player 9, AIR 1.1 |
- The
<mx:Grid>
tag defines a Grid container. - The
<mx:GridRow>
tag defines a grid row, which has one or more cells. The grid row must be a child of the<Grid>
tag. - The
<mx:GridItem>
tag defines a grid cell, and must be a child of the<GridRow>
tag. The<mx:GridItem>
tag can contain any number of children.
The height of all the cells in a single row is the same, but each row can have a different height. The width of all cells in a single column is the same, but each column can have a different width. You can define a different number of cells for each row or each column of the Grid container. In addition, a cell can span multiple columns or multiple rows of the container.
The Grid, GridRow, and GridItem containers have the following default sizing characteristics:
Characteristic | Description |
---|---|
Grid height | The sum of the default or explicit heights of all rows plus the gaps between rows. |
Grid width | The sum of the default or explicit width of all columns plus the gaps between columns. |
Height of each row and each cell | The default or explicit height of the tallest item in the row. If a GridItem container does not have an explicit size, its default height is the default or explicit height of the child in the cell. |
Width of each column and each cell | The default or explicit width of the widest item in the column. If a GridItem container does not have an explicit width, its default width is the default or explicit width of the child in the cell. |
Gap between rows and columns | Determined by the horizontalGap and verticalGap styles of the Grid class. The default value for both gaps is 6 pixels. |
Default padding | 0 pixels for the top, bottom, left, and right values, for all three container classes. |

The <mx:Grid>
tag inherits all of the tag
attributes of its superclass, except the Box.direction
property, and adds the following tag attributes:
<mx:Grid Styles horizontalGap="8" verticalGap="6" > ... These child tags are examples only: <mx:GridRow id="row1"> <mx:GridItem rowSpan="1" colSpan="1"> <mx:Button label="Button 1"/> </mx:GridItem> ... </mx:GridRow> ... </mx:Grid>
More examples
Related API Elements
Method | Defined By | ||
---|---|---|---|
![]() | addEventListener(type:String, listener:Function, useCapture:Boolean = false, priority:int = 0, useWeakReference:Boolean = false):void
Registers an event listener object with an EventDispatcher object so that the listener
receives notification of an event. | EventDispatcher | |
![]() |
Indicates whether the security restrictions
would cause any display objects to be omitted from the list returned by calling
the DisplayObjectContainer.getObjectsUnderPoint() method
with the specified point point. | DisplayObjectContainer | |
![]() |
Determines whether the specified display object is a child of the DisplayObjectContainer instance or
the instance itself. | DisplayObjectContainer | |
![]() |
Returns a rectangle that defines the area of the display object relative to the coordinate system
of the targetCoordinateSpace object. | DisplayObject | |
![]() |
Returns an array of objects that lie under the specified point and are children
(or grandchildren, and so on) of this DisplayObjectContainer instance. | DisplayObjectContainer | |
![]() |
Returns a rectangle that defines the boundary of the display object,
based on the coordinate system defined by the targetCoordinateSpace
parameter, excluding any strokes on shapes. | DisplayObject | |
![]() |
Converts the point object from the Stage (global) coordinates
to the display object's (local) coordinates. | DisplayObject | |
![]() |
Converts a two-dimensional point from the Stage (global) coordinates to a
three-dimensional display object's (local) coordinates. | DisplayObject | |
![]() |
Checks whether the EventDispatcher object has any listeners registered for a specific type
of event. | EventDispatcher | |
![]() |
Indicates whether an object has a specified property defined. | Object | |
![]() |
Evaluates the bounding box of the display object to see if it overlaps or intersects with the
bounding box of the obj display object. | DisplayObject | |
![]() |
Evaluates the display object to see if it overlaps or intersects with the
point specified by the x and y parameters. | DisplayObject | |
![]() |
Indicates whether an instance of the Object class is in the prototype chain of the object specified
as the parameter. | Object | |
![]() |
Converts a three-dimensional point of the three-dimensional display
object's (local) coordinates to a two-dimensional point in the Stage (global) coordinates. | DisplayObject | |
![]() |
Converts the point object from the display object's (local) coordinates to the
Stage (global) coordinates. | DisplayObject | |
![]() |
Indicates whether the specified property exists and is enumerable. | Object | |
![]() |
Removes all child DisplayObject instances from the child list of the DisplayObjectContainer instance. | DisplayObjectContainer | |
![]() |
Removes a listener from the EventDispatcher object. | EventDispatcher | |
![]() |
Raises a virtual keyboard. | InteractiveObject | |
![]() |
Sets the availability of a dynamic property for loop operations. | Object | |
![]() |
Lets the user drag the specified sprite. | Sprite | |
![]() |
Lets the user drag the specified sprite on a touch-enabled device. | Sprite | |
![]() |
Recursively stops the timeline execution of all MovieClips rooted at this object. | DisplayObjectContainer | |
![]() |
Ends the startDrag() method. | Sprite | |
![]() |
Ends the startTouchDrag() method, for use with touch-enabled devices. | Sprite | |
![]() |
Swaps the z-order (front-to-back order) of the two specified child objects. | DisplayObjectContainer | |
![]() |
Swaps the z-order (front-to-back order) of the child objects at the two specified index positions in the
child list. | DisplayObjectContainer | |
![]() |
Returns the string representation of this object, formatted according to locale-specific conventions. | Object | |
![]() |
Returns the primitive value of the specified object. | Object | |
![]() |
Checks whether an event listener is registered with this EventDispatcher object or any of
its ancestors for the specified event type. | EventDispatcher |
Method | Defined By |
---|
Styles are either common or associated with a specific theme. If the style is common, it can be used with any theme. If a style is associated with a specific theme, it can only be used if your application uses that theme.
Style | Description | Defined By | ||
---|---|---|---|---|
![]() | Type: String CSS Inheritance: No Language Version: ActionScript 3.0 Product Version: Flex 3 Runtime Versions: Flash9, AIR 1.1 If a background image is specified, this style specifies whether it is fixed with regard to the viewport ( "fixed" ) or scrolls along with the content ("scroll" ). | Container | ||
![]() | Type: String CSS Inheritance: No Language Version: ActionScript 3.0 Product Version: Flex 3 Runtime Versions: Flash9, AIR 1.1 The vertical distance in pixels from the top edge of the content area to the control's baseline position. | UIComponent | ||
![]() | Type: Class CSS Inheritance: No Language Version: ActionScript 3.0 Product Version: Flex 3 Runtime Versions: Flash9, AIR 1.1 The border skin class of the component. | Container | ||
![]() | Type: String CSS Inheritance: No Language Version: ActionScript 3.0 Product Version: Flex 3 Runtime Versions: Flash9, AIR 1.1 Bounding box style. | Container | ||
![]() | Type: String CSS Inheritance: No Language Version: ActionScript 3.0 Product Version: Flex 3 Runtime Versions: Flash9, AIR 1.1 The vertical distance, in pixels, from the bottom edge of the component to the bottom edge of its parent container's content area. | UIComponent | ||
![]() | Type: uint Format: Color CSS Inheritance: Yes Language Version: ActionScript 3.0 Product Version: Flex 3 Runtime Versions: Flash9, AIR 1.1 Color of text in the component, including the component label. | Container | ||
![]() | Type: String CSS Inheritance: Yes Language Version: ActionScript 3.0 Product Version: Flex 4 Runtime Versions: Flash10, AIR 1.5 The directionality of the text displayed by the component. | Container | ||
![]() | Type: uint Format: Color CSS Inheritance: Yes Language Version: ActionScript 3.0 Product Version: Flex 3 Runtime Versions: Flash9, AIR 1.1 Color of text in the component if it is disabled. | Container | ||
![]() | Type: Number CSS Inheritance: No Language Version: ActionScript 3.0 Product Version: Flex 3 Runtime Versions: Flash9, AIR 1.1 The alpha value for the overlay that is placed on top of the container when it is disabled. | Container | ||
![]() | Type: uint Format: Color CSS Inheritance: Yes Language Version: ActionScript 3.0 Product Version: Flex 3 Runtime Versions: Flash9, AIR 1.1 Color of the component highlight when validation fails. | UIComponent | ||
![]() | Type: String CSS Inheritance: Yes Language Version: ActionScript 3.0 Product Version: Flex 3 Runtime Versions: Flash9, AIR 1.1 Sets the antiAliasType property of internal TextFields. | Container | ||
![]() | Type: String CSS Inheritance: Yes Language Version: ActionScript 3.0 Product Version: Flex 3 Runtime Versions: Flash9, AIR 1.1 Name of the font to use. | Container | ||
![]() | Type: String CSS Inheritance: Yes Language Version: ActionScript 3.0 Product Version: Flex 3 Runtime Versions: Flash9, AIR 1.1 Sets the gridFitType property of internal TextFields that represent text in Flex controls. | Container | ||
![]() | Type: Number CSS Inheritance: Yes Language Version: ActionScript 3.0 Product Version: Flex 3 Runtime Versions: Flash9, AIR 1.1 Sets the sharpness property of internal TextFields that represent text in Flex controls. | Container | ||
![]() | Type: Number Format: Length CSS Inheritance: Yes Language Version: ActionScript 3.0 Product Version: Flex 3 Runtime Versions: Flash9, AIR 1.1 Height of the text, in pixels. | Container | ||
![]() | Type: String CSS Inheritance: Yes Language Version: ActionScript 3.0 Product Version: Flex 3 Runtime Versions: Flash9, AIR 1.1 Determines whether the text is italic font. | Container | ||
![]() | Type: Number CSS Inheritance: Yes Language Version: ActionScript 3.0 Product Version: Flex 3 Runtime Versions: Flash9, AIR 1.1 Sets the thickness property of internal TextFields that represent text in Flex controls. | Container | ||
![]() | Type: String CSS Inheritance: Yes Language Version: ActionScript 3.0 Product Version: Flex 3 Runtime Versions: Flash9, AIR 1.1 Determines whether the text is boldface. | Container | ||
![]() | Type: String CSS Inheritance: No Language Version: ActionScript 3.0 Product Version: Flex 3 Runtime Versions: Flash9, AIR 1.1 Horizontal alignment of children in the container. | Box | ||
![]() | Type: String CSS Inheritance: No Language Version: ActionScript 3.0 Product Version: Flex 3 Runtime Versions: Flash9, AIR 1.1 The horizontal distance in pixels from the center of the component's content area to the center of the component. | UIComponent | ||
horizontalGap | Type: Number Format: Length CSS Inheritance: No Language Version: ActionScript 3.0 Product Version: Flex 3 Runtime Versions: Flash9, AIR 1.1 Number of pixels between children in the horizontal direction. The default value is 8. | Grid | ||
![]() | Type: String CSS Inheritance: No Language Version: ActionScript 3.0 Product Version: Flex 3 Runtime Versions: Flash9, AIR 1.1 The name of the horizontal scrollbar style. | Container | ||
![]() | Type: String CSS Inheritance: Yes Language Version: ActionScript 3.0 Product Version: Flex 4.5 Runtime Versions: Flash10, AIR 2.5 The primary interaction mode for this component. | UIComponent | ||
![]() | Type: Boolean CSS Inheritance: Yes Language Version: ActionScript 3.0 Product Version: Flex 3 Runtime Versions: Flash9, AIR 1.1 A Boolean value that indicates whether kerning is enabled ( true ) or disabled (false ). | Container | ||
![]() | Type: String CSS Inheritance: Yes Language Version: ActionScript 3.0 Product Version: Flex 4.1 Runtime Versions: Flash10, AIR 1.5 Specifies the desired layout direction of a component. | UIComponent | ||
![]() | Type: String CSS Inheritance: No Language Version: ActionScript 3.0 Product Version: Flex 3 Runtime Versions: Flash9, AIR 1.1 The horizontal distance, in pixels, from the left edge of the component to the left edge of its parent container's content area. | UIComponent | ||
![]() | Type: Number CSS Inheritance: Yes Language Version: ActionScript 3.0 Product Version: Flex 3 Runtime Versions: Flash9, AIR 1.1 The number of additional pixels to appear between each character. | Container | ||
![]() | Type: String CSS Inheritance: Yes Language Version: ActionScript 3.0 Product Version: Flex 4 Runtime Versions: Flash10, AIR 1.5 The locale of the text displayed by this component. | Container | ||
![]() | Type: Number Format: Length CSS Inheritance: No Language Version: ActionScript 3.0 Product Version: Flex 3 Runtime Versions: Flash9, AIR 1.1 Number of pixels between the container's bottom border and the bottom of its content area. | Box | ||
![]() | Type: Number Format: Length CSS Inheritance: No Language Version: ActionScript 3.0 Product Version: Flex 3 Runtime Versions: Flash9, AIR 1.1 Number of pixels between the component's left border and the left edge of its content area. | Container | ||
![]() | Type: Number Format: Length CSS Inheritance: No Language Version: ActionScript 3.0 Product Version: Flex 3 Runtime Versions: Flash9, AIR 1.1 Number of pixels between the component's right border and the right edge of its content area. | Container | ||
![]() | Type: Number Format: Length CSS Inheritance: No Language Version: ActionScript 3.0 Product Version: Flex 3 Runtime Versions: Flash9, AIR 1.1 Number of pixels between the container's top border and the top of its content area. | Box | ||
![]() | Type: String CSS Inheritance: No Language Version: ActionScript 3.0 Product Version: Flex 3 Runtime Versions: Flash9, AIR 1.1 The horizontal distance, in pixels, from the right edge of the component to the right edge of its parent container's content area. | UIComponent | ||
![]() | Type: Boolean CSS Inheritance: Yes Language Version: ActionScript 3.0 Product Version: Flex 4.5 Runtime Versions: Flash10, AIR 1.5 Show the error border or skin when this component is invalid | UIComponent | ||
![]() | Type: Boolean CSS Inheritance: Yes Language Version: ActionScript 3.0 Product Version: Flex 4.5 Runtime Versions: Flash10, AIR 1.5 Show the error tip when this component is invalid and the user rolls over it | UIComponent | ||
![]() | Type: String CSS Inheritance: Yes Language Version: ActionScript 3.0 Product Version: Flex 3 Runtime Versions: Flash9, AIR 1.1 Alignment of text within a container. | Container | ||
![]() | Type: String CSS Inheritance: Yes Language Version: ActionScript 3.0 Product Version: Flex 3 Runtime Versions: Flash9, AIR 1.1 Determines whether the text is underlined. | Container | ||
![]() | Type: Class CSS Inheritance: No Language Version: ActionScript 3.0 Product Version: Flex 4 Runtime Versions: Flash10, AIR 1.5 The class implementing IUITextField that is used by this component to render text. | Container | ||
![]() | Type: Number Format: Length CSS Inheritance: Yes Language Version: ActionScript 3.0 Product Version: Flex 3 Runtime Versions: Flash9, AIR 1.1 Offset of first line of text from the left side of the container, in pixels. | Container | ||
![]() | Type: String CSS Inheritance: No Language Version: ActionScript 3.0 Product Version: Flex 3 Runtime Versions: Flash9, AIR 1.1 The vertical distance, in pixels, from the top edge of the component to the top edge of its parent container's content area. | UIComponent | ||
![]() | Type: String CSS Inheritance: No Language Version: ActionScript 3.0 Product Version: Flex 3 Runtime Versions: Flash9, AIR 1.1 Vertical alignment of children in the container. | Box | ||
![]() | Type: String CSS Inheritance: No Language Version: ActionScript 3.0 Product Version: Flex 3 Runtime Versions: Flash9, AIR 1.1 The vertical distance in pixels from the center of the component's content area to the center of the component. | UIComponent | ||
verticalGap | Type: Number Format: Length CSS Inheritance: No Language Version: ActionScript 3.0 Product Version: Flex 3 Runtime Versions: Flash9, AIR 1.1 Number of pixels between children in the vertical direction. The default value is 6. | Grid | ||
![]() | Type: String CSS Inheritance: No Language Version: ActionScript 3.0 Product Version: Flex 3 Runtime Versions: Flash9, AIR 1.1 The name of the vertical scrollbar style. | Container |
<?xml version="1.0"?> <!-- Simple example to demonstrate the Halo Grid layout container. --> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"> <s:Panel title="Grid Container Example" width="75%" height="75%" horizontalCenter="0" verticalCenter="0"> <s:VGroup left="10" right="10" top="10" bottom="10"> <s:Label width="100%" color="blue" text="A 3 by 3 Grid container of Button controls."/> <mx:Grid> <mx:GridRow> <mx:GridItem> <s:Button label="Row 1 Col 1" width="100"/> </mx:GridItem> <mx:GridItem> <s:Button label="Row 1 Col 2" width="100"/> </mx:GridItem> <mx:GridItem> <s:Button label="Row 1 Col 3" width="100"/> </mx:GridItem> </mx:GridRow> <mx:GridRow> <mx:GridItem> <s:Button label="Row 2 Col 1" width="100"/> </mx:GridItem> <mx:GridItem> <s:Button label="Row 2 Col 2" width="100"/> </mx:GridItem> <mx:GridItem> <s:Button label="Row 2 Col 3" width="100"/> </mx:GridItem> </mx:GridRow> <mx:GridRow> <mx:GridItem> <s:Button label="Row 3 Col 1" width="100"/> </mx:GridItem> <mx:GridItem> <s:Button label="Row 3 Col 2" width="100"/> </mx:GridItem> <mx:GridItem> <s:Button label="Row 3 Col 3" width="100"/> </mx:GridItem> </mx:GridRow> </mx:Grid> </s:VGroup> </s:Panel> </s:Application>
Wed Nov 21 2018, 06:34 AM -08:00